Merge pull request #2293 from daostack/bugfix/1811

Fixed colours to use them from global CSS

Author: vaske

src/assets/styles/global-variables.scss

@@ -54,6 +54,7 @@ $max-width: 1080px;
 
 $navy: rgba(18, 46, 91, 1);
 $sky: rgba(49, 120, 202, 1);
+$accent-0: rgba(3, 118, 255, 1); /* white blue */
 $accent-1: rgba(3, 118, 255, 1); /* Bright blue */
 $accent-2: rgba(246, 80, 80, 1); /* Red */
 $accent-3: rgba(0, 190, 144, 1); /* Green */
@@ -68,3 +69,6 @@ $gray-1: rgba(154, 169, 181, 1);
 $gray-2: rgba(191, 203, 213, 1);
 $gray-border-2: 1px solid $gray-2;
 $banner-background: #d5d8ba;
+$blue-link: #1977ca;
+
+$notifications-hover-white: rgba(233, 238, 244, 1);

src/components/Dao/DaoLandingPage.scss

@@ -49,6 +49,14 @@
     div {
       margin-bottom: 16px;
     }
+    a {
+      color: $blue-link;
+      &:hover,
+      &:focus,
+      &:active {
+        color: $blue-link;
+      }
+    }
   }
 
   .wallContainer {

src/components/Dao/DaoLandingPage.tsx

@@ -16,7 +16,6 @@ type IExternalProps = {
 type IProps = IExternalProps;
 
 export default class DaoLandingPage extends React.Component<IProps, null> {
-
   private disqusConfig = { url: "", identifier: "", title: "" };
 
   public componentDidMount() {
@@ -28,30 +27,44 @@ export default class DaoLandingPage extends React.Component<IProps, null> {
   }
 
   private handleEditContent = () => {
-    showSimpleMessage(
-      {
-        title: "Edit Home Page",
-        body:
-          <>
-            <div>Editing the content on this DAO’s home page will soon be possible via proposal. Stay tuned!</div>
-            <div>For now, if you need a change made to a DAO’s home page content, please contact us at <a href="https://[email protected]" target="_blank" rel="noopener noreferrer">[email protected]</a></div>
-          </>,
-      }
-    );
-  }
+    showSimpleMessage({
+      title: "Edit Home Page",
+      body: (
+        <>
+          <div>
+            Editing the content on this DAO’s home page will soon be possible
+            via proposal. Stay tuned!
+          </div>
+          <div>
+            For now, if you need a change made to a DAO’s home page content,
+            please contact us at{" "}
+            <a
+              href="https://[email protected]"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              [email protected]
+            </a>
+          </div>
+        </>
+      ),
+    });
+  };
 
   public render() {
     const daoState = this.props.daoState;
-    const customData = customDaoInfo[targetedNetwork()]?.[daoState.id.toLowerCase()];
+    const customData =
+      customDaoInfo[targetedNetwork()]?.[daoState.id.toLowerCase()];
 
     this.disqusConfig.url = `${process.env.BASE_URL}/dao/${this.props.daoState.address}/discussion`;
     this.disqusConfig.identifier = this.props.daoState.address;
     this.disqusConfig.title = "Discuss " + this.props.daoState.name;
 
     return (
       <div className={css.landingPage}>
-
-        <BreadcrumbsItem to={"/dao/" + daoState.address}>{daoState.name}</BreadcrumbsItem>
+        <BreadcrumbsItem to={"/dao/" + daoState.address}>
+          {daoState.name}
+        </BreadcrumbsItem>
 
         <div className={css.infoContainer}>
           <div className={css.titleContainer}>
@@ -63,20 +76,28 @@ export default class DaoLandingPage extends React.Component<IProps, null> {
             </div>
           </div>
 
-          {customData ?
+          {customData ? (
             <>{customData}</>
-            :
+          ) : (
             <>
-              <div>Welcome to {daoState.name}, a decentralized organization built on DAOstack.</div>
-              <div>Visit the <Link to={`/dao/${daoState.id}/schemes/`}>Proposals page</Link> to
-                make a proposal to the DAO or vote on existing proposals.</div>
+              <div>
+                Welcome to {daoState.name}, a decentralized organization built
+                on DAOstack.
+              </div>
+              <div>
+                Visit the{" "}
+                <Link to={`/dao/${daoState.id}/schemes/`}>Proposals page</Link>{" "}
+                to make a proposal to the DAO or vote on existing proposals.
+              </div>
             </>
-          }
-
+          )}
         </div>
         <div className={css.wallContainer}>
           <div className={css.headerText}>Discuss {daoState.name}</div>
-          <DiscussionEmbed shortname={process.env.DISQUS_SITE} config={this.disqusConfig} />
+          <DiscussionEmbed
+            shortname={process.env.DISQUS_SITE}
+            config={this.disqusConfig}
+          />
         </div>
       </div>
     );

src/components/Notification/Notification.scss

@@ -3,11 +3,11 @@
   display: block;
   position: relative;
   background-color: $white;
-  transition: all .25s ease;
+  transition: all 0.25s ease;
   line-height: 13px;
 
   &:hover {
-    background-color: rgba(233, 238, 244, 1.000);
+    background-color: $notifications-hover-white;
 
     button {
       opacity: 1;
@@ -27,38 +27,40 @@
 
   &.pending {
     .transactionBorder {
-      background-color: rgba(0, 118, 255, 1.000);
+      background-color: $accent-0;
     }
 
     .statusIcon .pending {
-      background-color: rgba(0, 118, 255, 1.000);
+      background-color: $accent-0;
       display: inline-block;
     }
   }
 
   &.success {
     .transactionBorder {
-      background-color: rgba(0, 190, 144, 1.000);
+      background-color: $accent-3;
     }
 
     .statusIcon .success {
-      background-color: rgba(0, 190, 144, 1.000);
+      background-color: $accent-3;
       display: inline-block;
     }
   }
 
   &.error {
     .transactionBorder {
-      background-color: rgba(246, 80, 80, 1.000);
+      background-color: $accent-2;
     }
 
     .statusIcon .error {
-      background-color: rgba(246, 80, 80, 1.000);
+      background-color: $accent-2;
       display: inline-block;
     }
   }
 
-  .pending, .success, .error {
+  .pending,
+  .success,
+  .error {
     display: none;
   }
 
@@ -96,25 +98,25 @@
     outline: none;
     border: none;
     background: none;
-    opacity: .6;
+    opacity: 0.6;
 
     img {
       width: 11px;
     }
   }
 
   .notificationControls {
-    width: 11px;
-    height: 11px;
     position: absolute;
-    right: 15px;
-    top: 50%;
+    right: 10px;
+    top: 20px;
     transform: translateY(-50%);
     text-align: center;
   }
 }
 
-.pendingTransaction.success .success, .pendingTransaction.pending .pending, .pendingTransaction.error .error {
+.pendingTransaction.success .success,
+.pendingTransaction.pending .pending,
+.pendingTransaction.error .error {
   display: inline;
 }
 
@@ -132,7 +134,8 @@
     top: 6px;
   }
 
-  .transactionMessage, .notificationControls {
+  .transactionMessage,
+  .notificationControls {
     display: none;
   }
 }
@@ -159,5 +162,7 @@
 }
 
 @keyframes disappear {
-  to {width: 0%;}
+  to {
+    width: 0%;
+  }
 }

src/layouts/App.scss

@@ -548,7 +548,7 @@ body {
   bottom: 50px;
   background-color: rgba(255, 255, 255, 1);
   left: 20px;
-  width: 290px;
+  width: 300px;
   height: auto;
   text-align: left;
   box-shadow: 0 2px 7px 0 rgba(0, 25, 51, 0.16);