From c8fd9b801b87e9c0ad0231bb1a4d2b55afd54769 Mon Sep 17 00:00:00 2001
From: Rajit Khatri <rajitkhatri@Rajits-MacBook-Pro.local>
Date: Fri, 1 Nov 2024 11:54:13 -0400
Subject: [PATCH 1/2] centered modals on the screen and fixed width of the
 recommendations container

---
 src/components/DynamicRecommendations.tsx |  2 +-
 src/components/NowPlaying.tsx             | 35 ++++++++++++++++-------
 src/components/RecommendationsModal.tsx   |  2 +-
 src/css/app.module.scss                   |  6 ++--
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/DynamicRecommendations.tsx b/src/components/DynamicRecommendations.tsx
index b907526..efe85eb 100644
--- 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
index 9529586..b0a2887 100644
--- 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
index cdca288..0f45cd6 100644
--- 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
index f9416c4..e48459a 100644
--- 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;
 }
 
 

From c079120ff90ac2f8213aa28691182301278b36cf Mon Sep 17 00:00:00 2001
From: Parikshith Mohite <parimohite1@gmail.com>
Date: Fri, 1 Nov 2024 12:54:35 -0400
Subject: [PATCH 2/2] Remove commented out code

---
 src/components/NowPlaying.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
index b0a2887..60d4154 100644
--- a/src/components/NowPlaying.tsx
+++ b/src/components/NowPlaying.tsx
@@ -135,19 +135,6 @@ 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)",