fix(search): sizes && offsets

#13

Author: azinit

src/app/index.scss

@@ -2,6 +2,7 @@
 @import "~tailwindcss/dist/utilities.css";
 @import "./vars.scss";
 @import "./normalize.scss";
+@import "./utils.scss";
 
 .gc-app {
     display: flex;

src/app/utils.scss

@@ -0,0 +1,5 @@
+.text-title {
+    font-family: var(--ff-secondary);
+    font-size: 20px;
+    font-weight: var(--fw--medium);
+}

src/pages/search/index.tsx

@@ -34,7 +34,7 @@ const SearchPage = () => {
 
     return (
         <Row className="page page-search">
-            <Col span={18}>
+            <Col span={16}>
                 <h2 className="toolbar">
                     Results by <b>{searchQuery}</b> search:
                 </h2>
@@ -75,7 +75,7 @@ const SearchPage = () => {
                     {isEmpty && <Empty className="p-8" description="No results found" />}
                 </div>
             </Col>
-            <Col span={5} className="ml-4">
+            <Col span={7} className="ml-4">
                 {/* FIXME: resolve on tabs level */}
                 <Tabs className="filters flex flex-col">
                     {/* FIXME: resolve on tabs level */}

src/shared/components/repo/index.scss

@@ -5,6 +5,9 @@
     height: 140px;
     padding: 22px;
     margin-top: 22px;
+    // FIXME: define on app level
+    font-family: var(--ff-secondary);
+    font-size: 14px;
     background-color: var(--clr-gray--100);
     border-radius: 10px;
 
@@ -13,16 +16,10 @@
         align-content: space-between;
 
         a {
-            font-family: var(--ff-secondary);
-            font-size: 20px;
-            font-weight: var(--fw--medium);
             color: var(--clr-text);
         }
 
         span {
-            font-family: var(--ff-secondary);
-            font-size: 14px;
-            font-weight: var(--fw--regular);
             line-height: 24px;
         }
     }

src/shared/components/repo/index.tsx

@@ -18,7 +18,7 @@ const Repo = (props: Props) => {
         <div className="repo">
             <div className="repo__info">
                 {/* FIXME: hardcoded, replace to generation by {username}/{reponame} */}
-                <a href={url?.replace("https://github.com/", "/")}>
+                <a className="text-title" href={url?.replace("https://github.com/", "/")}>
                     {owner?.login && `${owner.login}/`}
                     {name}
                 </a>

src/shared/components/user/index.scss

@@ -1,4 +1,7 @@
 .user {
+    // FIXME: define on app level
+    font-family: var(--ff-secondary);
+    font-size: 14px;
     background-color: var(--clr-gray--100);
     border-radius: 10px;
 }

src/shared/components/user/index.tsx

@@ -10,13 +10,13 @@ const User = (props: any) => {
             <div className="user__avatar">
                 <img src={avatarUrl} alt="avatar" width={90} className="rounded-full" />
             </div>
-            <div className="user__details ml-2 flex flex-col flex-grow">
-                <a className="user__login" href={`/${login}`}>
+            <div className="user__details ml-4 flex flex-col flex-grow">
+                <a className="user__login text-title" href={`/${login}`}>
                     {login}
                 </a>
                 <span className="user__bio">{bio}</span>
             </div>
-            <div className="user__actions ml-2">
+            <div className="user__actions ml-4">
                 <Button
                     className="user__action follow"
                     type={viewerIsFollowing ? "primary" : "default"}