CSS changes for user report (#2177)

mikehelmick · web-flow · commit 14881e5a6c4b · 2021-07-21T14:06:10.000-07:00
* CSS changes for user report

* remove alert border

* fixed border radius
diff --git a/assets/enx-redirect/report/header.html b/assets/enx-redirect/report/header.html
@@ -17,12 +17,24 @@
 {{end}}
 
 <style>
+.ur-title {
+  font-size: calc(1.625rem + 4.5vw) !important;
+  font-weight: 400 !important;
+  line-height: 1.2 !important;
+}
+
+.ur-alert {
+  color: #0D3D17 !important;
+  background-color: #D6EBF0 !important;
+  border-color: transparent !important;
+}
+
 .rounded-corners {
   border-radius: 20px;
 }
 
 .agreement {
-  border: 1px solid grey;
+  border: 1px solid #C4C4C4 !important;
 }
 
 .agree-button {
@@ -40,6 +52,23 @@
   border: none;
   border-bottom: 1px solid grey;
 }
+
+.continue-btn {
+  display: inline-block;
+  font-weight: 600;
+  line-height: 1.5;
+  color: #ffffff;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  padding: 0.8rem, 0.75rem;
+  font-size: 1.25rem;
+  border-radius: 20px;   
+}
 </style>
 
 <title>{{tDefault $.realmLocale .realm.Name "agencyDisplayName"}}</title>
diff --git a/assets/enx-redirect/report/index.html b/assets/enx-redirect/report/index.html
@@ -10,7 +10,7 @@
 
 <body class="my-4 g-4">
   <main role="main" class="container">
-    <h1 class="display-1 mb-3 w-100"><strong>{{t $.locale "user-report.header"}}</strong></h1>
+    <h1 class="display-1 mb-3 w-100 ur-title"><strong>{{t $.locale "user-report.header"}}</strong></h1>
 
     {{if $currentRealm.AgencyImage}}
     <div id="logo" class="rounded-corners pha-logo" style="background-color: {{$currentRealm.AgencyBackgroundColor}};" >
@@ -21,7 +21,7 @@ <h1 class="display-1 mb-3 w-100"><strong>{{t $.locale "user-report.header"}}</st
     {{end}}
 
     {{if not .skipForm}}
-    <div class="alert alert-primary d-flex align-items-center rounded-corners" role="alert">
+    <div class="alert alert-primary d-flex align-items-center rounded-corners ur-alert" role="alert">
       <svg class="bi flex-shrink-0 me-3" width="24" height="24" role="img" aria-label="Info:">
         <use xlink:href="/static/icons.svg#info-circle-fill"/>
       </svg>
@@ -101,7 +101,7 @@ <h1 class="display-1 mb-3 w-100"><strong>{{t $.locale "user-report.header"}}</st
       </div>
 
       <div class="d-grid">
-        <button id="submit" type="submit" class="btn btn-primary">
+        <button id="submit" type="submit" class="btn btn-primary continue-btn">
           {{t $.locale "user-report.request-button"}}
         </button>
       </div>
diff --git a/assets/enx-redirect/report/invalid.html b/assets/enx-redirect/report/invalid.html
@@ -11,15 +11,15 @@
 <body class="my-4 g-4">
   <main role="main" class="container">
     {{if $currentRealm.AgencyImage}}
-    <div id="logo" style="background-color: {{$currentRealm.AgencyBackgroundColor}};" >
+    <div id="logo" class="rounded-corners pha-logo" style="background-color: {{$currentRealm.AgencyBackgroundColor}};" >
       <img src="{{$currentRealm.AgencyImage}}" style="width:80vw; max-width:720px; content-visibility:auto;"
         loading="lazy" decoding="async"
         alt="{{$currentRealm.Name}} logo" />
     </div>
     {{end}}
     <h1 class="mb-3">{{tDefault $.realmLocale .realm.Name "agencyDisplayName"}}</h1>
 
-    <div class="alert alert-danger d-flex align-items-center" role="alert">
+    <div class="alert alert-danger d-flex align-items-center rounded-corners" role="alert">
       <svg class="bi flex-shrink-0 me-3" width="24" height="24" role="img" aria-label="Success:">
         <use xlink:href="/static/icons.svg#x-circle-fill"/>
       </svg>
