From 86fb8d38b4a0fe2d0968dc7cd4a132c4f94b76e6 Mon Sep 17 00:00:00 2001
From: David Christofas <dchristofas@owncloud.com>
Date: Thu, 30 Jun 2022 11:50:30 +0200
Subject: [PATCH] apply custom ownCloud desgin to remaining pages

---
 changelog/unreleased/idp-ui-update.md               |  7 +++++++
 services/idp/ui/src/components/ResponsiveScreen.jsx |  2 --
 services/idp/ui/src/components/ScopesList.jsx       |  3 ++-
 .../idp/ui/src/containers/Login/Chooseaccount.jsx   |  7 ++++---
 services/idp/ui/src/containers/Login/Consent.jsx    | 13 ++++++-------
 .../idp/ui/src/containers/Welcome/Welcomescreen.jsx |  6 +++---
 6 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 changelog/unreleased/idp-ui-update.md

diff --git a/changelog/unreleased/idp-ui-update.md b/changelog/unreleased/idp-ui-update.md
new file mode 100644
index 0000000000..c76c5c7e9d
--- /dev/null
+++ b/changelog/unreleased/idp-ui-update.md
@@ -0,0 +1,7 @@
+Enhancement: Update IdP UI
+
+Updated our fork of the lico IdP UI. This also updated the used npm dependencies.
+The design didn't change.
+
+https://github.com/owncloud/ocis/issues/3493
+https://github.com/owncloud/ocis/pull/4074
diff --git a/services/idp/ui/src/components/ResponsiveScreen.jsx b/services/idp/ui/src/components/ResponsiveScreen.jsx
index b05878f7cb..9817274910 100644
--- a/services/idp/ui/src/components/ResponsiveScreen.jsx
+++ b/services/idp/ui/src/components/ResponsiveScreen.jsx
@@ -10,7 +10,6 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 
 import ResponsiveDialog from './ResponsiveDialog';
-import Logo from '../images/app-icon.svg';
 import Loading from './Loading';
 import LocaleSelect from './LocaleSelect';
 
@@ -52,7 +51,6 @@ const ResponsiveScreen = (props) => {
     ...other
   } = props;
 
-  const bannerLogoSrc = branding?.bannerLogo ? branding.bannerLogo : Logo;
   const logo = withoutLogo ? null :
     <img src={process.env.PUBLIC_URL + '/static/logo.svg'} className="oc-logo" alt="ownCloud Logo"/>;
 
diff --git a/services/idp/ui/src/components/ScopesList.jsx b/services/idp/ui/src/components/ScopesList.jsx
index 3adcf4926c..fabe552577 100644
--- a/services/idp/ui/src/components/ScopesList.jsx
+++ b/services/idp/ui/src/components/ScopesList.jsx
@@ -67,8 +67,9 @@ const ScopesList = ({scopes, meta, classes, ...rest}) => {
           checked
           disableRipple
           disabled
+          className="oc-checkbox-dark"
         />
-        <ListItemText primary={label} />
+        <ListItemText primary={label} className="oc-light" />
       </ListItem>
     );
   }
diff --git a/services/idp/ui/src/containers/Login/Chooseaccount.jsx b/services/idp/ui/src/containers/Login/Chooseaccount.jsx
index cb3cfded29..8c4440540d 100644
--- a/services/idp/ui/src/containers/Login/Chooseaccount.jsx
+++ b/services/idp/ui/src/containers/Login/Chooseaccount.jsx
@@ -61,10 +61,10 @@ class Chooseaccount extends React.PureComponent {
 
     return (
       <DialogContent className={classes.content}>
-        <Typography variant="h5" component="h3">
+        <Typography variant="h5" component="h3" className="oc-light">
           {t("konnect.chooseaccount.headline", "Choose an account")}
         </Typography>
-        <Typography variant="subtitle1" className={classes.subHeader}>
+        <Typography variant="subtitle1" className={classes.subHeader + " oc-light"}>
           {t("konnect.chooseaccount.subHeader", "to sign in")}
         </Typography>
 
@@ -77,7 +77,7 @@ class Chooseaccount extends React.PureComponent {
               disabled={!!loading}
               onClick={(event) => this.logon(event)}
             ><ListItemAvatar><Avatar>{username.substr(0, 1)}</Avatar></ListItemAvatar>
-              <ListItemText primary={username} />
+              <ListItemText className="oc-light" primary={username} />
             </ListItem>
             <ListItem
               button
@@ -92,6 +92,7 @@ class Chooseaccount extends React.PureComponent {
                 </Avatar>
               </ListItemAvatar>
               <ListItemText
+                className="oc-light"
                 primary={
                   t("konnect.chooseaccount.useOther.label", "Use another account")
                 }
diff --git a/services/idp/ui/src/containers/Login/Consent.jsx b/services/idp/ui/src/containers/Login/Consent.jsx
index c31ba14172..42f6c2b436 100644
--- a/services/idp/ui/src/containers/Login/Consent.jsx
+++ b/services/idp/ui/src/containers/Login/Consent.jsx
@@ -95,14 +95,14 @@ class Consent extends React.PureComponent {
 
     return (
       <DialogContent>
-        <Typography variant="h5" component="h3">
+        <Typography variant="h5" component="h3" className="oc-light">
           {t("konnect.consent.headline", "Hi {{displayName}}", { displayName: hello.displayName })}
         </Typography>
-        <Typography variant="subtitle1" className={classes.subHeader}>
+        <Typography variant="subtitle1" className={classes.subHeader + " oc-light oc-mb-m"}>
           {hello.username}
         </Typography>
 
-        <Typography variant="subtitle1" gutterBottom>
+        <Typography variant="subtitle1" gutterBottom className="oc-light">
           <Trans t={t} i18nKey="konnect.consent.message">
             <Tooltip
               placement="bottom"
@@ -114,12 +114,12 @@ class Consent extends React.PureComponent {
         </Typography>
         <ScopesList dense disablePadding className={classes.scopesList} scopes={scopes} meta={meta.scopes}></ScopesList>
 
-        <Typography variant="subtitle1" gutterBottom>
+        <Typography variant="subtitle1" gutterBottom className="oc-light">
           <Trans t={t} i18nKey="konnect.consent.question">
             Allow <em><ClientDisplayName client={client}/></em> to do this?
           </Trans>
         </Typography>
-        <Typography color="secondary">
+        <Typography className="oc-light">
           {t("konnect.consent.consequence", "By clicking Allow, you allow this app to use your information.")}
         </Typography>
 
@@ -128,7 +128,6 @@ class Consent extends React.PureComponent {
             <div className={classes.wrapper}>
               <Button
                 color="secondary"
-                variant="outlined"
                 className={classes.button}
                 disabled={!!loading}
                 onClick={this.action(false, scopes)}
@@ -143,7 +142,7 @@ class Consent extends React.PureComponent {
                 type="submit"
                 color="primary"
                 variant="contained"
-                className={classes.button}
+                className="oc-button-primary"
                 disabled={!!loading}
                 onClick={this.action(true, scopes)}
               >
diff --git a/services/idp/ui/src/containers/Welcome/Welcomescreen.jsx b/services/idp/ui/src/containers/Welcome/Welcomescreen.jsx
index f20a195a1d..62b853e3c1 100644
--- a/services/idp/ui/src/containers/Welcome/Welcomescreen.jsx
+++ b/services/idp/ui/src/containers/Welcome/Welcomescreen.jsx
@@ -29,14 +29,14 @@ class Welcomescreen extends React.PureComponent {
     const loading = hello === null;
     return (
       <ResponsiveScreen loading={loading} branding={branding}>
-        <Typography variant="h5" component="h3">
+        <Typography variant="h5" component="h3" className="oc-light" >
           {t("konnect.welcome.headline", "Welcome {{displayName}}", {displayName: hello.displayName})}
         </Typography>
-        <Typography variant="subtitle1" className={classes.subHeader}>
+        <Typography variant="subtitle1" className={classes.subHeader + " oc-light"}>
           {hello.username}
         </Typography>
 
-        <Typography gutterBottom>
+        <Typography gutterBottom className="oc-light">
           {t("konnect.welcome.message", "You are signed in - awesome!")}
         </Typography>