Merge pull request #8 from rarimo/fixes

fix/UI
rarimo · Dec 18, 2023 · f86475f · f86475f
2 parents aa336da + d3f2d04
commit f86475f
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 10 deletions.
diff --git a/src/components/AppBar/AppBar.scss b/src/components/AppBar/AppBar.scss
@@ -13,6 +13,10 @@
 
 .app-bar__container {
   padding: to-rem(26) 0;
+
+  @include respond-to(large) {
+    padding: to-rem(20) 0;
+  }
 }
 
 .app-bar__content {
@@ -53,11 +57,13 @@
     padding: to-rem(6) to-rem(12);
   }
   &:hover{
-    color: var(--col-green-hover) ;
+    color: var(--col-total-white);
+    background: var(--col-green-hover) ;
     border: 1px solid var(--col-green-hover);
   }
   &:active{
-    color: var(--col-green-press);
+    color: var(--col-total-white);
+    background: var(--col-green-press);
     border: 1px solid var(--col-green-hover);
   }
 }
@@ -88,6 +94,12 @@
 .app-bar__logo-img{
   height: to-rem(48);
   width: to-rem(182);
+
+  @include respond-to(large) {
+    height: to-rem(40);
+    width: to-rem(150);
+  }
+
   @include respond-to(medium) {
     height: to-rem(36);
     width: to-rem(36);
@@ -103,6 +115,18 @@
 .app-bar__light {
   background-color: var(--col-total-white);
   border-bottom: 1px solid rgba(var(--col-primary-black-rgb), 0.1);
+
+  .app-bar__button {
+    border: none;
+
+    &:hover{
+      color: var(--col-green-hover) ;
+    }
+    &:active{
+      color: var(--col-green-press);
+    }
+  }
+
 }
 
 .app-bar__dark{

diff --git a/src/components/HomeHeroInstallSection/HomeHeroInstallSection.jsx b/src/components/HomeHeroInstallSection/HomeHeroInstallSection.jsx
@@ -75,7 +75,9 @@ const HomeHeroInstallSection = () => {
             {t('home-hero-section.btn-cancel')}
           </button>
           <button className="home-hero-install-section__footer-btn-install">
-            {t('home-hero-section.btn-install')}
+            <a href={CONFIG.linkToInstallSnap} target='_blank' rel='noreferrer'>
+              {t('home-hero-section.btn-install')}
+            </a>
           </button>
         </div>
         <a

diff --git a/src/components/HomeHeroInstallSection/HomeHeroInstallSection.scss b/src/components/HomeHeroInstallSection/HomeHeroInstallSection.scss
@@ -222,6 +222,7 @@
   color: #545960;
   border: 1px solid #545960;
   margin-right: to-rem(16);
+  pointer-events: none;
 
   @include respond-to(large) {
     padding: to-rem(8) to-rem(45);

diff --git a/src/components/HomeHeroSection/HomeHeroSection.scss b/src/components/HomeHeroSection/HomeHeroSection.scss
@@ -203,12 +203,11 @@
   }
 
   &:hover{
-    color: var(--col-total-white);
-    background: var(--col-green-hover);
+    color: var(--col-green-hover);
     border: 1px solid var(--col-green-hover);
   }
   &:active{
-    background: var(--col-green-press);
+    color: var(--col-green-press);
     border: 1px solid var(--col-green-press);
   }
 }

diff --git a/src/components/HomeIdentitySection/HomeIdentitySection.scss b/src/components/HomeIdentitySection/HomeIdentitySection.scss
@@ -152,6 +152,8 @@
   align-items: center;
   justify-content: center;
   margin-right: to-rem(16);
+  overflow: hidden;
+
   @include respond-to(medium) {
     width: to-rem(31);
     height: to-rem(31);

diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -5,7 +5,7 @@
   "header": {
     "button-install": "Install RariMe Snap",
     "button-install-mobile": "RariMe Snap",
-    "button-app": "RariMe app"
+    "button-app": "RariMe App"
   },
   "home-hero-section": {
     "title-part-1": "One",
@@ -52,7 +52,7 @@
     },
     "reach-out-support": {
       "question": "How do I reach out for snap support?",
-      "answer": "Visit the Rarimo Discord",
+      "answer": "Visit the Rarimo Discord ",
       "linkText": "support channel"
     },
     "what-can-store": {
@@ -83,7 +83,7 @@
     "title-content-section": "Identity Providers",
     "resources": {
       "title-1": "Age credentials",
-      "title-2": "Twitter handle",
+      "title-2": "X handle",
       "title-3": "Proof of Humanity",
       "title-4": "Gitcoin Passport",
       "subTitle-1": "ID Partners",

diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
@@ -90,6 +90,8 @@
   @include respond-above(xmedium) {
     --container-max-width: #{to-rem(1240)};
     --container-side-padding: #{to-rem(60)};
+    --tile-bg-width: #{to-rem(695)};
+    --tile-bg-height: #{to-rem(430)};
   }
 
   @include respond-above(large) {
@@ -113,6 +115,11 @@
   // App bar
   --app-bar-height: #{to-rem(100)};
 
+  @include respond-to(large) {
+    --app-bar-height: #{to-rem(80)};
+
+  }
+
   // App footer
   --app-footer-logo-color: var(--primary-title-color);
 

diff --git a/src/template-data/resources.js b/src/template-data/resources.js
@@ -9,7 +9,7 @@ export const resources = [
   },
   {
     img: '/img/twitter.png',
-    imgBg: '#1DA1F2',
+    imgBg: '#000',
     titleKey: 'home-identity-section.resources.title-2',
     subtitleKey: 'home-identity-section.resources.subTitle-2',
     tag: 'home-identity-section.resources.tag-2',

diff --git a/static/img/twitter.png b/static/img/twitter.png