[risk=no] Styling fix after clr (#1105)

* finxing pm btn styles * fixed footer * fixingSpinner
all-of-us · Aug 11, 2022 · 1424aa0 · 1424aa0
1 parent d4e061b
commit 1424aa0
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 25 deletions.
diff --git a/public-ui/angular.json b/public-ui/angular.json
@@ -21,9 +21,9 @@
               "src/favicon.ico"
             ],
             "styles": [
+              "src/styles.css",
               "node_modules/@clr/icons/clr-icons.min.css",
-              "node_modules/nouislider/distribute/nouislider.min.css",
-              "src/styles.css"
+              "node_modules/nouislider/distribute/nouislider.min.css"
             ],
             "scripts": [
               "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",

diff --git a/public-ui/src/app/data-browser/views/pm/pm-react.component.tsx b/public-ui/src/app/data-browser/views/pm/pm-react.component.tsx
@@ -28,6 +28,15 @@ const styles = reactStyles({
   btnLink: {
     fontSize: "14px",
     color: "#0077b7",
+    textAlign: 'left',
+    textTransform:'uppercase',
+    fontFamily:'GothamBook, Arial, sans-serif',
+    padding: '0 0.5rem',
+    height: '1.5rem',
+    letterSpacing:'.12em'
+  },
+  btnList: {
+    width:'14rem',
   },
   bsTitle: {
     paddingTop: "1em",
@@ -488,7 +497,7 @@ export const PMReactComponent = withRouteData(
                       <div className="button-item" key={index}>
                         <button
                           className={buttonClass}
-                          style={styles.btnLink}
+                          style={{...styles.btnLink, ...styles.btnList}}
                           onClick={() =>
                             this.showMeasurement(
                               pmConceptGroup,

diff --git a/public-ui/src/app/shared/components/rh-footer/rh-footer.component.css b/public-ui/src/app/shared/components/rh-footer/rh-footer.component.css
@@ -76,6 +76,7 @@ footer {
 .sub-menu {
     margin-top: 1rem;
     margin-left: 0;
+    padding-left: 0;
     display: flex;
     flex-wrap: wrap;
 }

diff --git a/public-ui/src/app/shared/components/rh-footer/rh-footer.tsx b/public-ui/src/app/shared/components/rh-footer/rh-footer.tsx
@@ -16,7 +16,6 @@ const styles = reactStyles({
     padding: "14px",
   },
   mainMenuItem: {
-    color: "red",
     fontSize: "0.9rem",
     width: "100%",
     marginTop: "0.5rem",
@@ -92,12 +91,14 @@ const css = `
     grid-template-columns: repeat(auto-fill, minmax(10%, 25%));
     width: 100%;
     margin-top: 0.5rem;
-    padding-right: 1rem;
+    // padding-right: 1rem;
+    padding:0;
   }
   footer .sub-menu {
     margin-top: 1rem;
     margin-left: 0;
     display: block;
+    padding-left: 0;
     flex-wrap: wrap;
   }
   footer .sub-menu li > a {
@@ -110,6 +111,7 @@ const css = `
   footer ul {
     list-style: none;
   }
+
   @media only screen and (max-width: 770px) {
     footer .footer-layout {
         flex-direction: column;
@@ -119,6 +121,7 @@ const css = `
         flex-direction: column;
         margin: 0;
         margin-top: 0.5rem;
+        padding:0;
     }
     footer .main-menu li {
         padding: 0;

diff --git a/public-ui/src/app/utils/spinner.tsx b/public-ui/src/app/utils/spinner.tsx
@@ -1,25 +1,17 @@
 import * as React from "react";
 
-export const spinnerContainerCss = `
+
+
+
+export const loadingCss = `
 a:link,a:visited,a{
-    color:#2aa3d8;
+  color:#2aa3d8;
 }
 @keyframes load {
-    from{background:transparent}
-    to{background:#302c70}
-}`;
-
-export const spinnerCss = `
-.spinner-container {
-    width:100%;
-    display: flex;
-    height: auto;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-}`;
+  from{background:transparent}
+  to{background:#302c70}
+}
 
-export const loadingCss = `
 .loading-dots {
     width:2rem;
     display:flex;
@@ -46,14 +38,65 @@ animation-delay: .75s;
 .loading-dots .dot:nth-of-type(4){
 animation-delay: 1s;
 }
+
+.spinner-container {
+  width:100%;
+  display: flex;
+  height: auto;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  padding:1rem;
+}
+
+#circle2 {
+  z-index:100;
+  display: block;
+  top: 50%;
+  left: 50%;
+  height: 50px;
+  width: 50px;
+  margin: -25px 0 0 -25px;
+  border: 4px rgba(0, 0, 0, 0.2) solid;
+  border-top: 4px rgb(0, 121, 184) solid;
+  border-radius: 50%;
+  -webkit-animation: spin2 1s infinite linear;
+          animation: spin2 1s infinite linear;
+}
+
+@-webkit-keyframes spin2 {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+@keyframes spin2 {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
 `;
 
 export const Spinner = () => {
   return (
     <React.Fragment>
-      <style>{spinnerCss}</style>
+      <style>{loadingCss}</style>
       <div className="spinner-container">
-        <span className="spinner"></span>
+        <div id="circle2"></div>
       </div>
     </React.Fragment>
   );
@@ -63,7 +106,6 @@ export const LoadingDots = () => {
   return (
     <React.Fragment>
       <style>{loadingCss}</style>
-      <style>{spinnerContainerCss}</style>
       <div className="loading-dots">
         <div className="dot"></div>
         <div className="dot"></div>

diff --git a/public-ui/src/assets/css/footer.css b/public-ui/src/assets/css/footer.css
@@ -380,8 +380,11 @@
 
 .social-links-menu {
     display: flex;
-    width: 55%;
+    width: 50%;
     justify-content: space-evenly;
+    padding:0;
+    margin: 0;
+    margin-top: -0.8rem;
 }
 
 .sub-btn {

diff --git a/public-ui/src/styles.css b/public-ui/src/styles.css
@@ -743,3 +743,9 @@ strong {
 body *:focus {
   outline: 1px solid rgba(38, 145, 208, 0.5);
 }
+
+.btn.btn-link {
+  margin: 0.25rem 0;
+  border-color: transparent;
+  background-color: transparent;
+}