From c4148d3bda1947778ed3742fdcc101cb0fab07e5 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 13 May 2022 11:37:45 +0300
Subject: [PATCH] style: post details page & feed page layout

---
 .../PostCard/BountyCard/BountyCard.tsx        | 12 ++-
 .../Posts/pages/FeedPage/FeedPage.tsx         |  4 +-
 .../Posts/pages/FeedPage/styles.module.css    | 13 ---
 .../Posts/pages/FeedPage/styles.module.scss   | 17 ++++
 .../PageContent/BountyPageContent.tsx         |  2 +-
 .../PageContent/QuestionPageContent.tsx       |  8 +-
 .../PageContent/StoryPageContent.tsx          |  8 +-
 .../Components/PostActions/PostActions.tsx    |  2 +-
 .../pages/PostDetailsPage/PostDetailsPage.tsx |  6 +-
 .../pages/PostDetailsPage/styles.module.css   | 13 ---
 .../pages/PostDetailsPage/styles.module.scss  | 44 +++++++++
 src/styles/_media_queries.scss                | 93 +++++++++++++++++++
 src/styles/_mixins.scss                       |  1 +
 src/styles/index.scss                         | 25 +----
 src/styles/scrollbar.scss                     | 39 +++++---
 src/utils/Wrapper.tsx                         |  1 +
 src/utils/storybook/decorators.tsx            |  3 +-
 src/utils/theme/index.js                      | 17 +++-
 18 files changed, 230 insertions(+), 78 deletions(-)
 delete mode 100644 src/features/Posts/pages/FeedPage/styles.module.css
 create mode 100644 src/features/Posts/pages/FeedPage/styles.module.scss
 delete mode 100644 src/features/Posts/pages/PostDetailsPage/styles.module.css
 create mode 100644 src/features/Posts/pages/PostDetailsPage/styles.module.scss
 create mode 100644 src/styles/_media_queries.scss
 create mode 100644 src/styles/_mixins.scss

diff --git a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
index 1fe0a75..382aa4b 100644
--- a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
+++ b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
@@ -23,6 +23,11 @@ interface Props {
     bounty: BountyCardType
 }
 export default function BountyCard({ bounty }: Props) {
+
+    const handleApply = () => {
+
+    }
+
     return (
         <div className="bg-white rounded-12 overflow-hidden border">
             <img src={bounty.cover_image} className='h-[200px] w-full object-cover bg-gray-100' alt="" />
@@ -37,7 +42,7 @@ export default function BountyCard({ bounty }: Props) {
                         </Link>
 
                     </div>
-                    <Button color="black" className="self-center !py-10 !px-36 flex-shrink-0 w-full md:w-auto ">
+                    <Button color="black" onClick={handleApply} className="self-center !py-10 !px-36 flex-shrink-0 hidden md:block ">
                         Apply
                     </Button>
                 </div>
@@ -60,6 +65,11 @@ export default function BountyCard({ bounty }: Props) {
                         <FiUsers /> <span className="align-middle text-body5">{bounty.applicants_count} Applicants</span>
                     </div>
                 </div>
+
+
+                <Button color="black" onClick={handleApply} fullWidth className="mt-16 !py-10 !px-36 md:hidden ">
+                    Apply
+                </Button>
             </div>
         </div>
     )
diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx
index ffd33b3..f4283b8 100644
--- a/src/features/Posts/pages/FeedPage/FeedPage.tsx
+++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx
@@ -6,7 +6,7 @@ import PostsList from '../../Components/PostsList/PostsList'
 import TrendingCard from '../../Components/TrendingCard/TrendingCard'
 import PopularCategories from './PopularCategories/PopularCategories'
 import SortBy from './SortBy/SortBy'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 
 export default function FeedPage() {
@@ -30,7 +30,7 @@ export default function FeedPage() {
 
     return (
         <div
-            className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
+            className={`page-container pt-16 w-full ${styles.grid}`}
         >
             <aside className='no-scrollbar'>
                 <div className="sticky"
diff --git a/src/features/Posts/pages/FeedPage/styles.module.css b/src/features/Posts/pages/FeedPage/styles.module.css
deleted file mode 100644
index 3d3aa94..0000000
--- a/src/features/Posts/pages/FeedPage/styles.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.grid {
-  grid-template-columns: 1fr 2fr 1fr;
-}
-
-@media screen and (max-width: 680px) {
-  aside {
-    display: none;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/features/Posts/pages/FeedPage/styles.module.scss b/src/features/Posts/pages/FeedPage/styles.module.scss
new file mode 100644
index 0000000..92cd659
--- /dev/null
+++ b/src/features/Posts/pages/FeedPage/styles.module.scss
@@ -0,0 +1,17 @@
+.grid {
+  display: grid;
+  grid-template-columns: 0 1fr 0;
+  gap: 0;
+
+  @media screen and (min-width: 680px) {
+    grid-template-columns: 1fr 2fr 0;
+    gap: 32px;
+  }
+
+  @media screen and (min-width: 1024px) {
+    grid-template-columns:
+      minmax(200px, 1fr)
+      minmax(50%, 70ch)
+      minmax(200px, 1fr);
+  }
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx
index 98baabc..0073c01 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 export default function BountyPageContent({ bounty }: Props) {
     return (
-        <div className="bg-white p-32 border rounded-16">
+        <div id="content" className="bg-white p-32 border rounded-16">
 
             {/* Header */}
             <div className="flex flex-col gap-24">
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
index 83d33b5..95e7986 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
@@ -14,8 +14,8 @@ interface Props {
 
 export default function QuestionPageContent({ question }: Props) {
     return (
-        <div>
-            <div className="bg-white p-32 border rounded-16">
+        <>
+            <div id="content" className="bg-white p-32 border rounded-16">
                 <div className="flex flex-col gap-24">
                     <Header size="lg" showTimeAgo={false} author={question.author} date={question.date} />
                     <h1 className="text-h2 font-bolder">{question.title}</h1>
@@ -38,9 +38,9 @@ export default function QuestionPageContent({ question }: Props) {
                 </div>
             </div>
 
-            <div className="mt-10">
+            <div id="comments" className="mt-10">
                 <CommentsSection comments={question.comments} />
             </div>
-        </div>
+        </>
     )
 }
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
index e091e55..d9686f6 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
@@ -14,8 +14,8 @@ interface Props {
 
 export default function StoryPageContent({ story }: Props) {
     return (
-        <div>
-            <div className="bg-white p-32 border rounded-16">
+        <>
+            <div id="content" className="bg-white p-32 border rounded-16">
                 <div className="flex flex-col gap-24">
                     <Header size="lg" showTimeAgo={false} author={story.author} date={story.date} />
                     <h1 className="text-h2 font-bolder">{story.title}</h1>
@@ -37,9 +37,9 @@ export default function StoryPageContent({ story }: Props) {
                 <div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(story.body) }}>
                 </div>
             </div>
-            <div className="mt-10">
+            <div id="comments" className="mt-10 comments_col">
                 <CommentsSection comments={story.comments} />
             </div>
-        </div>
+        </>
     )
 }
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.tsx
index f225b1e..66e3aec 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.tsx
@@ -22,7 +22,7 @@ export default function PostActions() {
     ]
 
     return (
-        <ul className="bg-white rounded-12 p-16 border   flex flex-col gap-32">
+        <ul className="bg-white rounded-12 p-16 border flex justify-around md:flex-col gap-32">
             {actions.map((action, idx) => <li
                 className={`py-4 px-16 text-body5 flex flex-col items-center cursor-pointer rounded-24 
                 ${idx === 0 ? 'bg-warning-50 hover:bg-warning-100 active:bg-warning-200 text-gray-900 font-medium' : 'text-gray-500 hover:bg-gray-50 active:bg-gray-100'}`}>
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 21d6529..f6375dc 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
@@ -7,7 +7,7 @@ import TrendingCard from '../../Components/TrendingCard/TrendingCard'
 import AuthorCard from './Components/AuthorCard/AuthorCard'
 import PageContent from './Components/PageContent/PageContent'
 import PostActions from './Components/PostActions/PostActions'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 
 export default function PostDetailsPage() {
@@ -38,7 +38,7 @@ export default function PostDetailsPage() {
         <div
             className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
         >
-            <aside className='no-scrollbar'>
+            <aside id='actions' className='no-scrollbar'>
                 <div className="sticky"
                     style={{
                         top: `${navHeight + 16}px`,
@@ -51,7 +51,7 @@ export default function PostDetailsPage() {
 
 
             <PageContent post={post} />
-            <aside className='no-scrollbar'>
+            <aside id='author' className='no-scrollbar'>
                 <div className="flex flex-col gap-24"
                     style={{
                         top: `${navHeight + 16}px`,
diff --git a/src/features/Posts/pages/PostDetailsPage/styles.module.css b/src/features/Posts/pages/PostDetailsPage/styles.module.css
deleted file mode 100644
index f9b341d..0000000
--- a/src/features/Posts/pages/PostDetailsPage/styles.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.grid{
-    grid-template-columns: auto 1fr 326px;
-}
-
-@media screen and (max-width:680px) {
-    aside{
-        display: none;
-    }
-
-    .grid{
-        grid-template-columns: 1fr;
-    }
-}
\ No newline at end of file
diff --git a/src/features/Posts/pages/PostDetailsPage/styles.module.scss b/src/features/Posts/pages/PostDetailsPage/styles.module.scss
new file mode 100644
index 0000000..14fc3b3
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/styles.module.scss
@@ -0,0 +1,44 @@
+@import "/src/styles/mixins";
+
+.grid {
+  display: grid;
+  //   grid-template-columns: 1fr;
+  gap: 32px;
+
+  grid-template-areas:
+    "content"
+    "actions"
+    "author"
+    "comments";
+
+  :global {
+    #content {
+      grid-area: content;
+    }
+    #actions {
+      grid-area: actions;
+    }
+    #author {
+      grid-area: author;
+    }
+    #comments {
+      grid-area: comments;
+    }
+  }
+
+  @include gt-md {
+    grid-template-columns: fit-content() 1fr;
+    grid-template-areas:
+      "actions content"
+      ". author"
+      ". comments";
+  }
+
+  @include gt-lg {
+    grid-template-columns: fit-content() minmax(60%, 80ch) minmax(200px, 326px);
+    grid-template-areas:
+      "actions content author"
+      ". comments ."
+      ". . .";
+  }
+}
diff --git a/src/styles/_media_queries.scss b/src/styles/_media_queries.scss
new file mode 100644
index 0000000..e449ea6
--- /dev/null
+++ b/src/styles/_media_queries.scss
@@ -0,0 +1,93 @@
+// media aliases and breakpoints
+$screen-xs-min: 320px;
+$screen-sm-min: 640px;
+$screen-md-min: 768px;
+$screen-lg-min: 1024px;
+$screen-xl-min: 1280px;
+
+$screen-xs-max: 639px;
+$screen-sm-max: 767px;
+$screen-md-max: 1023px;
+$screen-lg-max: 1279px;
+$screen-xl-max: 50000px;
+
+// media devices
+@mixin xs {
+  @media screen and (max-width: #{$screen-xs-max}) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max}) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max}) {
+    @content;
+  }
+}
+
+// media lt queries
+@mixin lt-sm {
+  @media screen and (max-width: #{$screen-xs-max}) {
+    @content;
+  }
+}
+
+@mixin lt-md {
+  @media screen and (max-width: #{$screen-sm-max}) {
+    @content;
+  }
+}
+
+@mixin lt-lg {
+  @media screen and (max-width: #{$screen-md-max}) {
+    @content;
+  }
+}
+
+@mixin lt-xl {
+  @media screen and (max-width: #{$screen-lg-max}) {
+    @content;
+  }
+}
+
+// media gt queries
+@mixin gt-xs {
+  @media screen and (min-width: #{$screen-xs-min}) {
+    @content;
+  }
+}
+
+@mixin gt-sm {
+  @media screen and (min-width: #{$screen-sm-min}) {
+    @content;
+  }
+}
+
+@mixin gt-md {
+  @media screen and (min-width: #{$screen-md-min}) {
+    @content;
+  }
+}
+
+@mixin gt-lg {
+  @media screen and (min-width: #{$screen-lg-min}) {
+    @content;
+  }
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 0000000..3c38888
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1 @@
+@import "media_queries";
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d5fec55..98aca03 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,8 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");
-@import './tw.scss',"./shared.scss",'./vendors.scss','./scrollbar.scss';
+@import "mixins";
 
+$screen-xs-min: 320px;
 
- 
+@import "./tw.scss", "./shared.scss", "./vendors.scss", "./scrollbar.scss";
 
 body {
   overflow-x: hidden;
@@ -28,23 +29,3 @@ svg {
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-.no-scrollbar {
-  -ms-overflow-style: none;
-  /* Internet Explorer 10+ */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-  /* Safari and Chrome */
-}
- 
-
-@media (pointer: coarse) {
-  .touch-device\:hidden {
-    display: none;
-  }
-}
-
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
index c54df2f..78016de 100644
--- a/src/styles/scrollbar.scss
+++ b/src/styles/scrollbar.scss
@@ -1,28 +1,45 @@
 /* width */
 ::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
 
 @media screen and (min-width: 668px) {
-
-    /* width */
-    ::-webkit-scrollbar {
-        width: 12px;
-    }
+  /* width */
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-    background: #e5e5e5;
+  background: #e5e5e5;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #c8c8c8;
+  border-radius: 10px;
+  background-color: #c8c8c8;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-    background-color: #aaaaaa;
-}
\ No newline at end of file
+  background-color: #aaaaaa;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+
+  &::-webkit-scrollbar,
+  & ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@media (pointer: coarse) {
+  .touch-device\:hidden {
+    display: none;
+  }
+}
diff --git a/src/utils/Wrapper.tsx b/src/utils/Wrapper.tsx
index 21f70e6..1437d3c 100644
--- a/src/utils/Wrapper.tsx
+++ b/src/utils/Wrapper.tsx
@@ -12,6 +12,7 @@ import ReactTooltip from 'react-tooltip';
 import 'react-multi-carousel/lib/styles.css';
 import 'react-loading-skeleton/dist/skeleton.css'
 import THEME from './theme';
+THEME.injectStyles();
 
 let basename = '/';
 
diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx
index 879cdab..f70e2b1 100644
--- a/src/utils/storybook/decorators.tsx
+++ b/src/utils/storybook/decorators.tsx
@@ -7,8 +7,8 @@ import { useWrapperSetup } from '../Wrapper';
 import { ModifyArgs } from './utils';
 import Modal from 'src/Components/Modals/Modal/Modal';
 import { worker } from 'src/mocks/browser'
-import { AnimatePresence, motion } from 'framer-motion';
 import ReactTooltip from 'react-tooltip';
+import THEME from '../theme';
 
 // Add the global stuff first (index.ts)
 // -------------------------------------------
@@ -30,6 +30,7 @@ if (process.env.STORYBOOK_ENABLE_MOCKS) {
     })
 }
 
+THEME.injectStyles()
 
 
 // This adds the stuff and setup that usually goes in the Wrapper.tsx
diff --git a/src/utils/theme/index.js b/src/utils/theme/index.js
index 45c08f9..90b6b8e 100644
--- a/src/utils/theme/index.js
+++ b/src/utils/theme/index.js
@@ -1,11 +1,24 @@
 
 const { colors } = require('./colors')
-const { MEDIA_QUERIES, screens } = require('./media_queries')
+const { MEDIA_QUERIES, screens } = require('./media_queries');
+
+
 
 const THEME = {
     colors,
     screens,
-    MEDIA_QUERIES
+    MEDIA_QUERIES,
+    injectStyles
+}
+
+
+// Inject variables in css
+function injectStyles() {
+    let root = document.documentElement;
+    // for (const [screen, value] of Object.entries(screens)) {
+    //     console.log(`--screen-${screen}`, value + 'px');
+    //     root.style.setProperty(`--screen-${screen}`, value + 'px')
+    // }
 }
 
 module.exports = THEME