apply custom ownCloud desgin to remaining pages

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

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"/>;
 

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>
     );
   }

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")
                 }

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)}
               >

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>