centered modals on the screen and fixed width of the recommendations …

…container
ECE49595-Team-6 · Nov 1, 2024 · c8fd9b8 · c8fd9b8
1 parent e0b7583
commit c8fd9b8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/src/components/DynamicRecommendations.tsx b/src/components/DynamicRecommendations.tsx
@@ -146,7 +146,7 @@ class DynamicRecommendations extends React.Component<{recTargetProp : string}, {
   render() {
     Spicetify.Player.addEventListener("onprogress", this.addToQueue);
     return (
-      <div className={styles.recommendationsSection} style={{width: "100%"}}>
+      <div className={styles.recommendationsSection} style={{width: "100%", paddingRight: "35px"}}>
         <div className={styles.recommendationHeader}>
           <div className={styles.recommendationsLabel} style={{marginTop: "10px"}}>{"Song Recommendations"}</div>
           <div className={styles.recommendationsHeaderSpacer}></div>

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
@@ -135,16 +135,30 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
     });
   }
 
+  // modalStyles = {
+  //   overlay: {
+  //     backgroundColor: "rgba(0, 0, 0, 0.70)",
+  //   },
+  //   content: {
+  //     position: 'relative',
+  //     top:      '60px',
+  //     left:     '27.5%',
+  //     width:    "550px",
+  //     height:   "610px",
+  //   },
+  // }
+
   modalStyles = {
     overlay: {
       backgroundColor: "rgba(0, 0, 0, 0.70)",
     },
     content: {
-      position: 'relative',
-      top:      '60px',
-      left:     '27.5%',
-      width:    "550px",
-      height:   "610px",
+      position:  'absolute',
+      top:       '40%',
+      left:      '47%',
+      transform: 'translate(-50%, -50%)',
+      width:     "33%",
+      height:    "65%",
     },
   }
 
@@ -153,11 +167,12 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
       backgroundColor: "rgba(0, 0, 0, 0.70)",
     },
     content: {
-      position: 'relative',
-      top:      '55px',
-      left:     '21.5%',
-      width:    "800px",
-      height:   "600px"
+      position:  'absolute',
+      top:       '43%',
+      left:      '47%',
+      transform: 'translate(-50%, -50%)',
+      width:     "50%",
+      height:    "600px"
     },
   }
 

diff --git a/src/components/RecommendationsModal.tsx b/src/components/RecommendationsModal.tsx
@@ -49,7 +49,7 @@ class RecommendationsModal extends React.Component<{setModalIsOpen: (value: bool
             <img className={styles.playIcon} style={{marginLeft: "auto"}} src={"https://img.icons8.com/?size=100&id=6483&format=png&color=FFFFFF"} 
                   onClick={() => this.props.setModalIsOpen(false)}/>
         </div>
-        <div className={styles.settingContainer} style={{paddingLeft: "0", marginBottom: "30px"}}>
+        <div className={styles.settingContainer} style={{paddingLeft: "0", marginBottom: "20px"}}>
           {Object.keys(this.props.selectedMetrics).map((metric_name) => <div className={styles.recommendationTarget} style={{marginRight: "10px",
                                                                                                                            }}>
                                                                           {metric_name}

diff --git a/src/css/app.module.scss b/src/css/app.module.scss
@@ -305,6 +305,8 @@
 .sectionHeaderContainer {
   display: flex;
   align-items: center;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .settingsIconContainer:hover {
@@ -327,8 +329,8 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(4, 1fr);
-  row-gap: 13px;
-  column-gap: 10px;
+  row-gap: 5px;
+  column-gap: 5px;
 }