Merge pull request #154 from niyazm524/fix/feedback

fix(style)

Author: AdeliyaG

src/app/normalize-antd.scss

@@ -12,3 +12,8 @@
     height: 100%;
     background: rgba(255, 255, 255, 0.5);
 }
+
+.ant-select-selector,
+.ant-btn {
+    border-radius: 5px !important;
+}

src/app/vars.scss

@@ -27,7 +27,7 @@
 
     /* misc */
     --transition: 0.25s;
-    // TODO: add border-radius
+    --radius: 10px;
 
     /* fonts */
     --ff-primary: 'Roboto', sans-serif;

src/features/home-hero/index.scss

@@ -33,7 +33,7 @@
         color: var(--clr-gray--100);
         background: var(--clr-primary);
         border: none;
-        border-radius: 10px;
+        border-radius: var(--radius);
         outline: none;
         transition: 0.4s;
 

src/features/repo-details/details-card/index.scss

@@ -1,7 +1,7 @@
 .details-card {
     padding: 12px 16px;
     background-color: var(--clr-gray--100);
-    border-radius: 10px;
+    border-radius: var(--radius);
 
     &.primary {
         background-color: var(--clr-primary);

src/features/repo-list/index.tsx

@@ -84,7 +84,7 @@ const RepoList = ({ username }: Props) => {
                     data?.user?.repositories.nodes?.map((node) => <Repo key={node?.id} {...node} />)
                 ) : (
                     <h2 className="repo-list__placeholder">
-                        {username} doesn’t have any public repositories yet.
+                        {username} doesn’t have any repositories yet.
                     </h2>
                 )}
             </div>

src/features/search/results/index.scss

@@ -13,25 +13,5 @@
     &__item {
         user-select: none;
         border-radius: 10px;
-        box-shadow: 0 5px 0 var(--clr-gray--900);
-        transition: var(--transition);
-
-        &:hover {
-            box-shadow: 0 5px 0 var(--clr-primary--hover);
-        }
-
-        &:active {
-            box-shadow: 0 5px 0 var(--clr-primary--active);
-        }
-
-        &.Organization {
-            pointer-events: none;
-            box-shadow: 0 5px 0 var(--clr-danger);
-            opacity: 0.5;
-
-            .card__actions {
-                pointer-events: all;
-            }
-        }
     }
 }

src/features/user-info/index.scss

@@ -6,14 +6,14 @@
 
         &-ava {
             width: 100%;
-            border-radius: 10px;
+            border-radius: var(--radius);
         }
 
         &-placeholder {
             min-width: 100%;
             height: 0;
             padding-bottom: 100%;
-            border-radius: 10px;
+            border-radius: var(--radius);
         }
     }
 
@@ -33,12 +33,10 @@
         line-height: 28px;
     }
 
-    // !!! FIXME: styles (enhance colors)
     &__btn.follow,
     &__btn.unfollow,
     &__btn.edit {
         margin-top: 10px;
-        border-radius: 9px;
         transition: 0.4s;
 
         &:hover {

src/shared/components/card/index.scss

@@ -5,6 +5,12 @@
     font-size: 14px;
     background-color: var(--clr-gray--100);
     border-radius: 10px;
+    box-shadow: 0 5px 0 var(--clr-gray--900);
+    transition: var(--transition);
+
+    &:hover {
+        box-shadow: 0 5px 0 var(--clr-primary--hover);
+    }
 
     &__preview img {
         min-width: 90px;

src/shared/components/card/skeleton-group/index.tsx

@@ -14,7 +14,7 @@ const CardSkeletonGroup = ({ amount }: Props) => (
         {Array(amount)
             .fill(null)
             .map((_, index) => (
-                <Skeleton key={index} className="mb-6" />
+                <Skeleton key={index} className="mb-5" />
             ))}
     </>
 );

src/shared/components/card/skeleton/index.scss

@@ -1,5 +1,5 @@
 .card-skeleton {
     width: 100% !important;
-    height: 140px !important;
+    height: 145px !important;
     border-radius: 10px;
 }