Merge pull request #99 from jennydo/styling-buttons-meditation

Change some design and moved buttons to the the right
jennydo · Jul 3, 2024 · dfdbf5f · dfdbf5f
2 parents 9b06c66 + 28a8964
commit dfdbf5f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 54 deletions.
diff --git a/src/components/Meditation/Meditation.scss b/src/components/Meditation/Meditation.scss
@@ -12,7 +12,7 @@
     h4 {
         font-size: 18px;
         font-weight: 300;
-        
+
         &.text-selected {
             font-weight: bold;
             color: purple;
@@ -33,6 +33,23 @@
         }
     }
 
+    & .audio-source-buttons {
+        width: 80%;
+        height: 80%;
+        align-items: flex-end;
+        transition:
+            background-color 0.3s ease,
+            border-radius 0.3s ease;
+        background-color: #fdeafa;
+        border-radius: 25px;
+        padding-bottom: 10px;
+
+        &:hover {
+            background-color: #e2e6ff; // Background color on hover
+            border-radius: 25px; // Border radius on hover
+        }
+    }
+
     & .icons {
         justify-content: space-around;
     }
@@ -53,6 +70,7 @@
 
 .meditation-audios {
     padding: 20px;
+
 }
 
 .meditation-box {
@@ -62,4 +80,5 @@
     background-color: white;
     padding: 20px;
     box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 25px;
 }
diff --git a/src/pages/Meditation.js b/src/pages/Meditation.js
@@ -1,5 +1,5 @@
 
-import { Grid, GridItem, useDisclosure, Button, IconButton, Icon, Divider } from "@chakra-ui/react";
+import { Grid, GridItem, useDisclosure, Button, IconButton, Icon, Divider, Flex } from "@chakra-ui/react";
 import { TiPlus } from "react-icons/ti";
 import { CloudinaryContext, CloudinaryContextProvider } from "../context/CloudinaryContext";
 import { useState, useRef, useContext, useEffect } from "react";
@@ -13,7 +13,7 @@ import axios from "axios";
 import { useAuthContext } from "../hooks/useAuthContext";
 import { AudioContext } from "../context/AudioContext";
 import MeditationModal from "../components/Meditation/MeditationModal";
-import {StyledButton} from '../styles/components/StyledComponents'
+import { StyledButton } from '../styles/components/StyledComponents'
 
 const Meditation = () => {
   const { user } = useAuthContext();
@@ -25,7 +25,7 @@ const Meditation = () => {
     onClose: onModalClose,
   } = useDisclosure();
   const finalRef = useRef(null);
-  const {isOpen, onOpen, onClose} = useDisclosure();
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const {
     displayedImage,
@@ -64,9 +64,10 @@ const Meditation = () => {
         type: "CHOOSE_AUDIO",
         payload: res.data.meditationAudio,
       });
-      spotifyDispatch({ 
+      spotifyDispatch({
         type: "SET_SPOTIFY_PLAYING_TRACK",
-        payload: res.data.music})
+        payload: res.data.music
+      })
 
       /// Update state of choosing audio for choosing spotify
       audioDispatch({ type: "CHOOSE_PLAY_AUDIO" });
@@ -111,74 +112,77 @@ const Meditation = () => {
       <h1>Meditation</h1>
       <div className='meditation page'>
         <Grid className="meditation-box" gridTemplateRows={"10% 10% 2% 1fr 10%"} h={"65vh"}>
-        {/* <Grid className="meditation-box" gridTemplateRows={"10% 10% 2% 1fr 10%"} h={"calc(100vh - 300px)"}> */}
-          
+          {/* <Grid className="meditation-box" gridTemplateRows={"10% 10% 2% 1fr 10%"} h={"calc(100vh - 300px)"}> */}
+
           <GridItem w='100%' h='100%' className="meditation textbox">
             <h2>Let's start your meditation! ☮️</h2>
           </GridItem>
 
           <GridItem w='100%' h='100%'>
-            <Grid gridTemplateColumns={"50% 1fr"} w='100%' h='100%'>
-              <GridItem className="meditation textbox sub">
-                <h4 className={`text-${tab ? "": "selected"}`} onClick={() => setTab(false)}>Choose your own voices</h4>
+            <Grid gridTemplateColumns={"50% 1fr"} w='100%' h='100%' marginTop="20px">
+              <GridItem className="meditation audio-source-buttons" marginLeft={10}>
+                <h4 className={`text-${tab ? "" : "selected"}`} onClick={() => setTab(false)}>Choose your own voices</h4>
               </GridItem>
-              <GridItem className="meditation textbox sub">
-                <h4 className={`text-${!tab ? "": "selected"}`} onClick={() => setTab(true)}>Choose from Spotify</h4>
+              <GridItem className="meditation audio-source-buttons">
+                <h4 className={`text-${!tab ? "" : "selected"}`} onClick={() => setTab(true)}>Choose from Spotify</h4>
               </GridItem>
             </Grid>
           </GridItem>
 
           <GridItem w='100%' h='100%' className="meditation textbox" mt={1}>
-            <Divider/>
           </GridItem>
 
           <GridItem w='100%' h='100%'>
-          {(!tab) && (
-            <Grid gridTemplateRows={"10% 1fr"} w='100%' h='100%'>
-              <GridItem w='100%' h='100%' className="meditation icons">
-                <IconButton
-                  className="meditation-icon"
-                  icon={<Icon as={TiPlus}/>}
-                  onClick={onModalOpen}
-                  variant='ghost'
-                  fontSize='30px'
-                />
-                <IconButton
-                  className="meditation-icon"
-                  icon={isFilter ? <Icon as={FaHeart} fill="#FFAFCC"/> : <Icon as={FaRegHeart} />}
-                  onClick={() => setIsFilter(!isFilter)}
-                  variant='ghost'
-                  fontSize='30px'
-                />
-              </GridItem>
-              <GridItem w='100%' h='100%' maxHeight='30vh'>
-                <AudioList isFilter={isFilter} />
-              </GridItem>
-            </Grid>
-          )}
-
-          {(tab) && (
-            <SpotifyMain/>
-          )}
-          </GridItem>
-
-          <GridItem w='100%' h='100%' className="meditation">
-            <StyledButton text={"Start"} onClick={() => {
-              handleSave()
-              onOpen()
-            }}/>
-          </GridItem>
-
-        </Grid>
-      </div>
+            {(!tab) && (
+              <Grid gridTemplateRows={"10% 1fr"} w='100%' h='100%' marginTop="14px">
+                <GridItem w='100%' h='100%' className="meditation-icons" marginTop="20px">
+
+                  <Flex justifyContent="flex-end" paddingRight="38px" >
+                    <IconButton
+                      className="meditation-icon"
+                      icon={<Icon as={TiPlus} />}
+                      onClick={onModalOpen}
+                      variant='ghost'
+                      fontSize='30px'
+                    />
+                    <IconButton
+                      className="meditation-icon"
+                      icon={isFilter ? <Icon as={FaHeart} fill="#FFAFCC" /> : <Icon as={FaRegHeart} />}
+                      onClick={() => setIsFilter(!isFilter)}
+                      variant='ghost'
+                      fontSize='30px'
+                    />
+                  </Flex>
+                </GridItem>
+                <GridItem w='100%' h='100%' maxHeight='30vh'>
+                  <AudioList isFilter={isFilter} />
+                </GridItem>
+              </Grid>
+
+            )}
+
+        {(tab) && (
+          <SpotifyMain />
+        )}
+      </GridItem>
+
+      <GridItem w='100%' h='100%' className="meditation">
+        <StyledButton text={"Start"} onClick={() => {
+          handleSave()
+          onOpen()
+        }} />
+      </GridItem>
+
+    </Grid >
+      </div >
 
       <NewAudioModal
         finalRef={finalRef}
         onClose={onModalClose}
         isOpen={isModalOpen}
       />
 
-      <MeditationModal isOpen={isOpen} onClose={onClose}/>
+      <MeditationModal isOpen={isOpen} onClose={onClose} />
     </>
   );
 };

diff --git a/src/styles/components/StyledComponents.js b/src/styles/components/StyledComponents.js
@@ -19,6 +19,8 @@ const StyledButton = ({text, onClick=() => {}, icon=null, width=null}) => {
             _active={{ bg: '#d0aadf' }}
             leftIcon={icon}
             w={width}
+            borderRadius="20px"
+            px={8}
         >
             {text}
         </Button>    
@@ -31,7 +33,7 @@ const StyledBox = ({ onClick=() => {}, children=null, selected=false, className=
         w='100%'
         h='100%'
         p={2} 
-        borderRadius={5} 
+        borderRadius={25} 
         className={`${className} ${selected ? "styled-box-selected" : ""}`}
         onClick={onClick}>
         {children}