style: minor frontend cleanup wrt. monospace fonts

frontend/src/_common.sass

@@ -5,5 +5,5 @@
 @use "~@fortawesome/fontawesome-pro/scss/solid"
 
 @use "~typeface-roboto" as roboto
-
 @use "~typeface-source-sans-pro" as source-sans-pro
+@use "~typeface-source-code-pro" as source-code-pro

frontend/src/app.sass

@@ -22,6 +22,7 @@
   // FONTS
   --font-base: "Source Sans Pro", "Trebuchet MS", sans-serif
   --font-logo: "Roboto", var(--font-base)
+  --font-monospace: "Source Code Pro", monospace
 
   // DIMENSIONS
   --header-height: 100px
@@ -585,9 +586,6 @@ section
     border-bottom: none
     padding-bottom: 0px
 
-.pseudonym
-  font-family: monospace
-
 .headline-one
   margin-bottom: 10px
 
@@ -717,8 +715,13 @@ section
      background-color: hsla($hue, 75%, 50%, $opacity) !important
 
 
-.uuid
+.uuid, .pseudonym, .ldap-primary-key, .email, .file-path, .metric-value, .metric-label
-  font-family: monospace
+  font-family: var(--font-monospace)
+
+.token
+  font-family: var(--font-monospace)
+  white-space: pre-wrap
+  word-break: break-all
 
 .form--inline
   display: inline-block
@@ -832,7 +835,7 @@ section
 
 .comment, .literal-error
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 th
   vertical-align: top
@@ -1099,12 +1102,12 @@ th, td
 #changelog
   font-size: 14px
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 #gitrev
   font-size: 12px
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .breadcrumbs__container
   position: relative
@@ -1225,12 +1228,12 @@ a.breadcrumbs__home
   top: 5px
 
 .table__td--csv, .table__th--csv
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .confirmationText
   white-space: pre-wrap
   font-size: 14px
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .func-field__wrapper, .allocation-missing-prios, .allocation-users__accept, .corrections-overview__section
   max-height: 75vh
@@ -1295,7 +1298,7 @@ a.breadcrumbs__home
 
 .csv-parse-error
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
   overflow: auto
   max-height: 75vh
 

frontend/src/utils/form/datepicker.css

@@ -29,7 +29,7 @@
     visibility: hidden;
     direction: ltr;
     border-collapse: separate;
-    font-family: "Open Sans", Calibri, Arial, sans-serif;
+    /* font-family: "Open Sans", Calibri, Arial, sans-serif; */
     background-color: white;
     border-width: 0;
     border-style: solid;

frontend/src/utils/inputs/inputs.sass

@@ -235,7 +235,7 @@ option
     padding-bottom: 0
 
   .file-input__list-item
-    font-family: monospace
+    font-family: var(--font-monospace)
     font-size: 15px
 
 // PREVIOUSLY UPLOADED FILES

package-lock.json

@@ -20773,6 +20773,11 @@
       "integrity": "sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg==",
       "dev": true
     },
+    "typeface-source-code-pro": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/typeface-source-code-pro/-/typeface-source-code-pro-1.1.3.tgz",
+      "integrity": "sha512-BAQ8I7Xy5zS5+KuG+gjRPNYCdfwL8vSF9jT8q9wzCRiiOG4h7id5zt8wcQx59riGRbRsgycRfs/ubyAm2z/FJQ=="
+    },
     "typeface-source-sans-pro": {
       "version": "0.0.75",
       "resolved": "https://registry.npmjs.org/typeface-source-sans-pro/-/typeface-source-sans-pro-0.0.75.tgz",

package.json

@@ -109,6 +109,7 @@
     "tmp": "^0.1.0",
     "typeface-roboto": "0.0.75",
     "typeface-source-sans-pro": "0.0.75",
+    "typeface-source-code-pro": "^1.1.3",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-manifest-plugin": "^2.2.0",

src/Foundation/Yesod/ErrorHandler.hs

@@ -44,29 +44,24 @@ errorHandler err = do
 
                 [whamlet|
                   <p>_{MsgErrorResponseEncrypted}
-                  <pre .errMsg>
+                  <pre .literal-error>
                     #{ciphertext}
                 |]
             | otherwise -> plaintext
 
         errPage = case err of
           NotFound -> [whamlet|<p>_{MsgErrorResponseNotFound}|]
-          InternalError err' -> encrypted err' [whamlet|<p .errMsg>#{err'}|]
+          InternalError err' -> encrypted err' [whamlet|<p .literal-error>#{err'}|]
           InvalidArgs errs -> [whamlet|
               <ul>
                 $forall err' <- errs
-                  <li .errMsg>#{err'}
+                  <li .literal-error>
+                    #{err'}
              |]
           NotAuthenticated -> [whamlet|<p>_{MsgErrorResponseNotAuthenticated}|]
           PermissionDenied err' -> [whamlet|<p .errMsg>#{err'}|]
           BadMethod method -> [whamlet|<p>_{MsgErrorResponseBadMethod (decodeUtf8 method)}|]
       siteLayout (toWgt . mr $ ErrorResponseTitle err) $ do
-        toWidget
-          [cassius|
-            .errMsg
-              white-space: pre-wrap
-              font-family: monospace
-          |]
         errPage
     provideRep . fmap PrettyValue $ case err of
       PermissionDenied err' -> return $ object [ "message" JSON..= err' ]

src/Handler/Admin/ErrorMessage.hs

@@ -18,8 +18,9 @@ postAdminErrMsgR = do
   let ctView' = wrapForm ctView def{ formAction = Just . SomeRoute $ AdminErrMsgR, formEncoding = ctEncoding }
   defaultLayout
     [whamlet|
+      $newline never
       $maybe t <- plaintext
-        <pre style="white-space:pre-wrap; font-family:monospace">
+        <pre .literal-error>
           $case t
             $of String t'
               #{t'}

src/Handler/Admin/Test.hs

@@ -224,7 +224,7 @@ postAdminTestR = do
             $forall err <- errs
               <li>#{err}
         $of FormSuccess res
-          <p style="white-space:pre-wrap; font-family:monospace;">
+          <p style="white-space:pre-wrap; font-family:var(--font-monospace);">
             #{tshow res}
     |]
 

src/Handler/Health.hs

@@ -88,9 +88,9 @@ getInstanceR = do
           $newline never
           <dl .deflist>
             <dt .deflist__dt>_{MsgClusterId}
-            <dd .deflist__dd style="font-family: monospace">#{UUID.toText clusterId}
+            <dd .deflist__dd .uuid>#{UUID.toText clusterId}
             <dt .deflist__dt>_{MsgInstanceId}
-            <dd .deflist__dd style="font-family: monospace">#{UUID.toText instanceId}
+            <dd .deflist__dd .uuid>#{UUID.toText instanceId}
         |]
     provideJson instanceInfo
     provideRep . return $ tshow instanceInfo

templates/course/lecturerMassInput/cellInvitation.hamlet

@@ -1,7 +1,7 @@
  $newline never
  <td>
    #{csrf}
-   <span style="font-family: monospace">
+   <span .email>
      #{lEmail}
  <td>
    ^{messageTooltip invWarnMsg}

templates/external-exam-show.hamlet

@@ -51,6 +51,6 @@ $maybe ExternalExamResult{externalExamResultResult} <- mResult
                 <li>
                   ^{nameEmailWidget userDisplayEmail userDisplayName userSurname}
               $of Left email
-                <li style="font-family: monospace">
+                <li .email>
                   #{email}
 

templates/external-exam/staffMassInput/cellInvitation.hamlet

@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}

templates/mail/support.hamlet

@@ -3,6 +3,10 @@ $newline never
 <html>
   <head>
     <meta charset="UTF-8">
+    <style>
+      .url {
+        font-family: monospace;
+      }
   <body>
     <section>
       <dl>
@@ -36,7 +40,7 @@ $newline never
         $maybe referer <- jReferer
           <dt>Referer
           <dd>
-            <a href=#{referer} style="font-family: monospace">
+            <a href=#{referer} .url>
               #{referer}
         $maybe errName <- errPartName
           <dt>Fehlermeldung

templates/mail/userAuthModeUpdate.hamlet

@@ -9,6 +9,9 @@ $newline never
         font-variant: small-caps;
         font-weight: normal;
       }
+      .email {
+        font-family: monospace;
+      }
   <body>
     <h1>
       $case userAuthentication
@@ -20,8 +23,10 @@ $newline never
       <p>
         _{SomeMessage MsgAuthPWHashTip}
       <dd>
-        <dt>_{SomeMessage MsgPWHashIdent}
+        <dt>
-        <dd style="font-family: monospace">#{userIdent}
+          _{SomeMessage MsgPWHashIdent}
+        <dd .email>
+          #{userIdent}
         <dt>_{SomeMessage MsgPWHashPassword}
         <dd>
           _{SomeMessage MsgPasswordResetEmailIncoming}

templates/messages/courseInvitationAlreadyRegistered.hamlet

@@ -2,4 +2,5 @@
   _{MsgCourseParticipantsAlreadyRegistered (length aurAlreadyRegistered)}
 <ul>
   $forall email <- aurAlreadyRegistered'
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}

templates/messages/courseInvitationRegisteredWithoutField.hamlet

@@ -2,4 +2,5 @@
   _{MsgCourseParticipantsRegisteredWithoutField (length aurNoUniquePrimaryField)}
 <ul>
   $forall email <- aurNoUniquePrimaryField'
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}

templates/messages/examRegistrationInvitationNotRegisteredWithoutCourse.hamlet

@@ -2,4 +2,5 @@
   _{MsgExamRegistrationNotRegisteredWithoutCourse (length aurNoCourseRegistration)}
 <ul>
   $forall email <- aurNoCourseRegistration
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}

templates/messages/examRegistrationInvitationRegisteredWithoutField.hamlet

@@ -2,4 +2,5 @@
   _{MsgExamRegistrationRegisteredWithoutField (length aurNoUniquePrimaryField)}
 <ul>
   $forall email <- aurNoUniquePrimaryField
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}

templates/messages/submissionFilesIgnored.hamlet

@@ -3,7 +3,8 @@
   $forall ident <- ignoredFiles
     $case ident
       $of Right fileTitle
-        <li style="font-family: monospace">#{fileTitle}
+        <li .file-path>
+          #{fileTitle}
       $of Left cID
-        <li>_{MsgRatingFile} (<span style="font-family: monospace">#{toPathPiece cID}</span>)
+        <li>_{MsgRatingFile} (<span .file-path>#{toPathPiece cID}</span>)
     

templates/metrics.hamlet

@@ -1,7 +1,7 @@
 $newline never
 $maybe t <- metricsBearer
   <section>
-    <pre style="font-family: monospace; white-space: pre-wrap; word-break: break-all;">
+    <pre .token>
       #{toPathPiece t}
 <section>
   <dl .deflist>
@@ -23,7 +23,12 @@ $maybe t <- metricsBearer
                 $of _
                   <ul .list-inline .list--comma-separated>
                     $forall (lName, lValue) <- lPairs
-                      <li>#{lName}=#{lValue}
+                      <li>
+                        <span .metric-label>
+                          #{lName}
+                        =
+                        <span .metric-value>
+                          #{lValue}
             $nothing
               $with allLabels <- getLabels mSamples
                 <table .table .table--striped .table--hover>
@@ -32,7 +37,8 @@ $maybe t <- metricsBearer
                       $if showMetricName metricName mSamples
                         <th .table__th>_{MsgMetricName}
                       $forall l <- allLabels
-                        <th .table__th style="font-family: monospace">#{l}
+                        <th .table__th .metric-label>
+                          #{l}
                       <th .table__th>_{MsgMetricValue}
                   <tbody>
                     $forall Sample sName lPairs sValue <- mSamples
@@ -41,8 +47,8 @@ $maybe t <- metricsBearer
                           <td .table__td title=#{sName}>
                             #{metricBasename metricName sName}
                         $forall l <- allLabels
-                          <td .table__td>
+                          <td .table__td .metric-value>
                             $maybe lValue <- lookup l lPairs
                               #{lValue}
-                        <td .table__td>
+                        <td .table__td .metric-value>
                           #{decodeUtf8 sValue}

templates/tutorial/tutorMassInput/cellInvitation.hamlet

@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}

templates/widgets/email.hamlet

@@ -1,2 +1,2 @@
-<span style="font-family: monospace">
+<span .email>
   ^{toHtml email}

templates/widgets/genericFileField.hamlet

@@ -43,7 +43,8 @@ $maybe exts <- fmap toNullable fieldRestrictExtensions
     _{MsgUploadModeExtensionRestriction}: #
     <ul .list--inline .list--comma-separated .list--iconless>
       $forall ext <- bool id (mappend zipExtensions) mayUnpack exts
-        <li style="font-family: monospace">#{ext}
+        <li .file-path>
+          #{ext}
     $if fieldMultiple
       <br>
       _{MsgUploadModeExtensionRestrictionMultipleTip}

templates/widgets/massinput/examCorrectors/cellInvitation.hamlet

@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}

templates/widgets/massinput/examOfficeUsers/cellInvitation.hamlet

@@ -1,6 +1,6 @@
  $newline never
  <td>
-   <span style="font-family: monospace">
+   <span .email>
      #{email}
  <td>
    ^{messageTooltip invWarnMsg}

templates/widgets/massinput/submissionUsers/cellInvitation.hamlet

@@ -1,7 +1,7 @@
  $newline never
  <td>
    #{csrf}
-   <span style="font-family: monospace">
+   <span .email>
      #{email}
  <td>
    ^{messageTooltip invWarnMsg}

templates/widgets/specificFileField.hamlet

@@ -5,4 +5,5 @@ $if acceptRestricted
   _{MsgUploadModeExtensionRestriction}: 
   <ul .list--inline .list--comma-separated .list--iconless>
     $forall ext <- extensions
-      <li style="font-family: monospace">#{ext}
+      <li .file-path>
+        #{ext}

templates/widgets/zipFileField.hamlet

@@ -5,4 +5,5 @@ $maybe exts <- fmap toNullable permittedExtensions
   _{MsgUploadModeExtensionRestriction}: 
   <ul .list--inline .list--comma-separated .list--iconless>
     $forall ext <- bool id (mappend zipExtensions) doUnpack exts
-      <li style="font-family: monospace">#{ext}
+      <li .file-path>
+        #{ext}