Fix styles of consent page

changelog/unreleased/konnectd-consent-page

@@ -0,0 +1,7 @@
+Change: Properly style konnectd consent page
+
+Tags: konnectd
+
+After bringing our theme into konnectd, we've had to adjust the styles of the consent page so the text is visible and button reflects our theme.
+
+https://github.com/owncloud/ocis/pull/754

konnectd/assets/identifier-registration.yaml

@@ -6,7 +6,6 @@ clients:
     name: ownCloud web app
     application_type: web
     insecure: yes
-    trusted: yes
     redirect_uris:
       - https://localhost:9200/
       - https://localhost:9200/oidc-callback.html

konnectd/ui/src/app.css

@@ -81,6 +81,11 @@ strong {
   background-color: #306db5 !important;
 }
 
+.oc-checkbox-dark svg {
+  /* Needs to be important to overwrite material-ui */
+  fill: white !important;
+}
+
 .oc-footer-message {
   color: white;
   padding: 10px;
@@ -99,6 +104,10 @@ strong {
   margin-top: 30px !important;
 }
 
+.oc-mb-m {
+  margin-bottom: 20px !important;
+}
+
 .oc-light {
   color: #fff !important;
 }

konnectd/ui/src/components/ScopesList.js

@@ -78,8 +78,9 @@ const ScopesList = ({scopes, meta, classes, ...rest}) => {
           checked
           disableRipple
           disabled
+          className="oc-checkbox-dark"
         />
-        <ListItemText primary={label} />
+        <ListItemText primary={label} className="oc-light" />
       </ListItem>
     );
   }

konnectd/ui/src/containers/Login/Consent.js

@@ -20,10 +20,6 @@ import ClientDisplayName from '../../components/ClientDisplayName';
 import ScopesList from '../../components/ScopesList';
 
 const styles = theme => ({
-  button: {
-    margin: theme.spacing(1),
-    minWidth: 100
-  },
   buttonProgress: {
     color: green[500],
     position: 'absolute',
@@ -32,9 +28,6 @@ const styles = theme => ({
     marginTop: -12,
     marginLeft: -12
   },
-  subHeader: {
-    marginBottom: theme.spacing(2)
-  },
   scopesList: {
     marginBottom: theme.spacing(2)
   },
@@ -87,18 +80,18 @@ class Consent extends React.PureComponent {
 
     return (
       <div>
-        <Typography variant="h5" component="h3">
+        <Typography variant="h5" component="h3" className="oc-light">
           <FormattedMessage
             id="konnect.consent.headline"
             defaultMessage="Hi {displayName}"
-            values={{displayName: hello.displayName}}>
-          </FormattedMessage>
+            values={{displayName: hello.displayName}}
+          />
         </Typography>
-        <Typography variant="subtitle1" className={classes.subHeader}>
+        <Typography variant="subtitle1" className="oc-light oc-mb-m">
           {hello.username}
         </Typography>
 
-        <Typography variant="subtitle1" gutterBottom>
+        <Typography variant="subtitle1" gutterBottom className="oc-light">
           <FormattedMessage
             id="konnect.consent.message"
             defaultMessage="{clientDisplayName} wants to"
@@ -120,16 +113,7 @@ class Consent extends React.PureComponent {
         </Typography>
         <ScopesList dense disablePadding className={classes.scopesList} scopes={scopes} meta={meta.scopes}></ScopesList>
 
-        <Typography variant="subtitle1" gutterBottom>
-          <FormattedMessage
-            id="konnect.consent.question"
-            defaultMessage="Allow {clientDisplayName} to do this?"
-            values={{
-              clientDisplayName: <em><ClientDisplayName client={client}/></em>
-            }}
-          ></FormattedMessage>
-        </Typography>
-        <Typography color="secondary">
+        <Typography className="oc-light">
           <FormattedMessage
             id="konnect.consent.consequence"
             defaultMessage="By clicking Allow, you allow this app to use your information.">
@@ -155,7 +139,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)}
               >