css changes

space between stories
storyimg increased
space between storyimg and story text
increased story textbox size

Author: philip-ogun

src/components/stories/StoryPage.tsx

@@ -222,52 +222,52 @@ function StoryPage(props: IStoryPageProps) {
                     )}
                   </div>
                 </div>
-                <div className="flex-column">
-                  <div className ="parent">
-                    {isPaused &&
-                      <IoIosPlay 
-                        className="pause-audio"
-                        size = "1.75em"
-                        onClick={() => {
-                          if (currAudio.current) {
-                            currAudio.current.play();
-                            setIsPaused(false);
-                          }
-                        }}
-                      />  
-                    }
-                    {!isPaused &&
-                      <IoIosPause 
-                        className="pause-audio"
-                        size = "1.75em"
-                        onClick={() => {
-                          if (currAudio.current) {
-                            currAudio.current.pause();
-                            setIsPaused(true);
-                          }
-                        }}
-                      />  
-                    }
-                  </div>
-                  {!storyTextExpanded &&
-                    <FaExpandArrowsAlt
-                      className="story-icon"
-                      size="1.5em"
+              <div className="flex-column">
+                <div className ="parent">
+                  {isPaused &&
+                    <IoIosPlay 
+                      className="pause-audio"
+                      size = "1.75em"
                       onClick={() => {
-                        setStoryTextExpanded(true);
+                        if (currAudio.current) {
+                          currAudio.current.play();
+                          setIsPaused(false);
+                        }
                       }}
                     />
                   }
-                  {storyTextExpanded &&
-                    <FaCompressArrowsAlt
-                      className="story-icon"
-                      size="1.5em"
+                  {!isPaused &&
+                    <IoIosPause 
+                      className="pause-audio"
+                      size = "1.75em"
                       onClick={() => {
-                        setStoryTextExpanded(false);
+                        if (currAudio.current) {
+                          currAudio.current.pause();
+                          setIsPaused(true);
+                        }
                       }}
-                    />
+                    />  
                   }
                 </div>
+                {!storyTextExpanded &&
+                  <FaExpandArrowsAlt
+                    className="story-icon"
+                    size="1.5em"
+                    onClick={() => {
+                      setStoryTextExpanded(true);
+                    }}
+                  />
+                }
+                {storyTextExpanded &&
+                  <FaCompressArrowsAlt
+                    className="story-icon"
+                    size="1.5em"
+                    onClick={() => {
+                      setStoryTextExpanded(false);
+                    }}
+                  />
+                }
+                </div>
               </div>
             }
           </div>

src/components/stories/StorySelectPage.tsx

@@ -24,7 +24,7 @@ function StorySelectPage(props: IStorySelectPageProps) {
       <div className="flex-row-wrap-container space-between list-row">
         {stories.map((story, idx) => {
           return (
-            <Card storyCard style={{ flex: '33%' }} key={`story_card_${idx}`}>
+            <Card storyCard style={{ flex: '30%' }} key={`story_card_${idx}`}>
               <h2>{story.title}</h2>
               <img
                 className="card-img"

src/css/common.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
 }
 
 .flex-start {
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
 }
 
 .category-card {
@@ -30,7 +30,7 @@
 }
 
 .welcome-page h1 {
-  font-size: 3.5em;
+  font-size: 4em;
   font-family: 'Comic Sans MS', 'Comic Sans', serif;
 }
 
@@ -45,7 +45,18 @@
 .card-item {
   background-color: #F4FAF8;
   border-radius: 25px;
-  padding: 20px;
+  padding-top: 0px;
+  padding-bottom: 20px;
+  margin-bottom: 28px;
+}
+
+.card-item-story {
+  background-color: #F4FAF8;
+  border-radius: 25px;
+  padding-top: 15px;
+  margin-bottom: 8px;
+  max-width: 700px;
+  max-height: 300px;
 }
 
 .clickable:hover {
@@ -54,7 +65,7 @@
 
 .card-img {
   margin: 30px 0;
-  max-width: 250px;
+  max-width: 300px;
   max-height: 200px;
 }
 
@@ -90,11 +101,11 @@
 }
 
 .space-between {
-  justify-content: space-between;
+  justify-content: space-around;
 }
 
 .story-card {
-  max-width: 25%;
+  max-width: 28%;
 }
 
 @media (max-width: 1000px) {

src/css/story.css

@@ -18,9 +18,10 @@
 }
 
 .background-img {
-  max-height: 400px;
-  max-width: 600px;
-  margin-bottom: 30px;
+  max-height: 500px;
+  max-width: 700px;
+  margin-right: 10px;
+  margin-bottom: 0px;
 }
 
 .pause-audio{