Css Tweaks (heights, colors, paddings...)

ErickLimaS · Oct 20, 2022 · cb84c2a · cb84c2a
1 parent 8b57693
commit cb84c2a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 27 deletions.
diff --git a/front-end/public/index.html b/front-end/public/index.html
@@ -11,7 +11,7 @@
   <!-- Google Font Poppins-->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/front-end/src/Components/Home/AnimesReleasingThisWeekList/index.tsx b/front-end/src/Components/Home/AnimesReleasingThisWeekList/index.tsx
@@ -144,7 +144,7 @@ export default function AnimesReleasingThisWeek(data: any) {
             <div className='see-more-button'>
                 {data.data.title.romaji.length > 25 ? (
                     <div className='name-fade'>
-                        <h1>{data.data.title.romaji.slice(0, 25)}... </h1>
+                        <h1>{data.data.title.romaji.slice(0, 36)}... </h1>
                         {/* <Score data={data.data.averageScore} /> */}
                     </div>
 

diff --git a/front-end/src/Components/Home/AnimesReleasingThisWeekList/styles.ts b/front-end/src/Components/Home/AnimesReleasingThisWeekList/styles.ts
@@ -7,13 +7,25 @@ interface itemData {
 
 export const AnimeToBeListed = styled.div<itemData>`
 
-    height: 26rem;
-    width: 20rem;
+    height: 260px;
+    width: 200px;
 
-    margin: 0 0.7rem;
+    margin: 0 6px;
+
+    @media(max-width: 768px){
+
+        height: calc(260px - 5vh);
+        width: calc(200px - 5vh);
+
+        margin: 0 4px;
+
+    }
 
     @media(max-width: 520px){
-        margin: 0 0.3rem;
+
+        min-height: 200px;
+        min-width: 160px;
+
     }
 
     background-image: ${(props) => props.info.coverImage && `url("${props.info.coverImage.large}")`};
@@ -89,8 +101,9 @@ export const AnimeToBeListed = styled.div<itemData>`
     :hover{
             
         .see-more-button{
-                background-image: linear-gradient(rgba(0,0,0,.01) , rgba(0,0,0,.8) 20%);
-                border-radius: 0 0 3px 3px;
+            
+            background-image: linear-gradient(rgba(0,0,0,.01) , rgba(16 2 7 / 72%) 17%);
+            border-radius: 0 0 3px 3px;
 
             .name-fade{
                 opacity: 1;
@@ -104,6 +117,7 @@ export const AnimeToBeListed = styled.div<itemData>`
                 transition: all ease-in-out 200ms;
                 
                 font-size: 1.4rem;
+                text-align: center;
                 font-weight: 600;
                 color: #c0c0c0;
 

diff --git a/front-end/src/Components/MediaPage/AnimeRecommendations/styles.ts b/front-end/src/Components/MediaPage/AnimeRecommendations/styles.ts
@@ -9,12 +9,12 @@ export const Container = styled.div<Props>`
         display: flex;
         flex-direction: column;
 
-        margin: 2rem 0;
+        margin: 20px 0;
         border-top: 4px solid var(--pink-variant-1);
 
         .heading-section{
             
-            margin-bottom: 1rem;
+            margin-bottom: 10px;
 
             display: flex;
             flex-direction: row;
@@ -32,8 +32,9 @@ export const Container = styled.div<Props>`
 
             h2{
                 font-size: 2rem;
+                text-align: center;
                 font-weight: 600;
-                margin: 2rem 0;
+                margin: 20px 0;
                 color: ${props => props.darkMode ? 'var(--text-grey-variant)' : '#222222'};
                
                 span{

diff --git a/front-end/src/Components/MediaPage/FromSameFranchise/styles.ts b/front-end/src/Components/MediaPage/FromSameFranchise/styles.ts
@@ -6,7 +6,7 @@ interface Props {
 
 export const Container = styled.div<Props>`
 
-margin-top: 1rem;
+margin-top: 10px;
 border-top: 4px solid var(--pink-variant-1);
 
 .heading-section{
@@ -18,7 +18,7 @@ border-top: 4px solid var(--pink-variant-1);
 
     @media(max-width: 768px){
 
-        margin-bottom: 1rem;
+        margin-bottom: 10px;
 
         display: flex;
         flex-direction: column;
@@ -29,8 +29,9 @@ border-top: 4px solid var(--pink-variant-1);
 
     h2{
         font-size: 2rem;
+        text-align: center;
         font-weight: 600;
-        margin: 2rem 0;
+        margin: 20px 0;
         color: ${props => props.darkMode ? 'var(--text-grey-variant)' : '#222222'};
     
         span{

diff --git a/front-end/src/Components/SearchInnerPage/index.tsx b/front-end/src/Components/SearchInnerPage/index.tsx
@@ -144,11 +144,11 @@ export default function SearchInnerPage() {
                                                         <span className='launch-year'>({item.startDate.year})</span>
                                                     </h2>
                                                 )}
-                                                {item.title.native && (
+                                                {/* {item.title.native && (
                                                     <h3>
                                                         {item.title.native.slice(0, 20)}
                                                     </h3>
-                                                )}
+                                                )} */}
                                                 {/* {item.startDate.year && (
                                                     <p>{item.startDate.year}</p>
                                                 )} */}

diff --git a/front-end/src/Components/SearchInnerPage/styles.ts b/front-end/src/Components/SearchInnerPage/styles.ts
@@ -38,7 +38,7 @@ export const Search = styled.div<Props>`
         height: 22px;
         width: auto;
 
-        padding: 0.9rem 1rem;
+        padding: 9px 10px;
 
         *{
             color: #ff5ebc;
@@ -116,7 +116,7 @@ export const Search = styled.div<Props>`
 
             ~button{
                 cursor: pointer;
-                padding: 1.1rem;
+                padding: 11px;
                 background-color: #ff5ebc;
 
                 svg{
@@ -148,7 +148,7 @@ export const Search = styled.div<Props>`
 
         background-color: ${props => props.darkMode ? '#212121' : '#f3f2ff'};
 
-        padding: 1.1rem;
+        padding: 11px;
         border: none;
         border-radius: 0 18px 18px 0;
         font-size: 1.4rem;
@@ -268,9 +268,10 @@ export const SearchResults = styled.div<Props2>`
 
                 display: flex;
                 flex-direction: column;
+                gap: 10px;
                 justify-content: space-between;
 
-                margin: 1rem;
+                margin: 0 1rem;
 
                 @media(max-width: 425px){
 
@@ -279,11 +280,11 @@ export const SearchResults = styled.div<Props2>`
                 }
 
                 h2{
-                    font-size: 1.6rem;
+                    font-size: 1.5rem;
                     font-weight: 600;
                     color: #ff1a75;
 
-                    margin-bottom: 0.5rem;
+                    /* margin-bottom: 5px; */
 
                     span.adult-result{
                         font-size: 1.3rem;

diff --git a/front-end/src/Page/Home/styles.ts b/front-end/src/Page/Home/styles.ts
@@ -180,11 +180,6 @@ export const Container = styled.div<ContainerProps>`
 
                     overflow-y: auto;
 
-                    >div{
-
-                        min-width: 18rem;
-
-                    }
                 }
 
             }
-Original file line number
+Diff line change
@@ Expand Up / @@ -180,11 +180,6 @@ export const Container = styled.div<ContainerProps>` @@
                         overflow-y: auto;
-                        >div{
-                            min-width: 18rem;
-                        }
                     }
                 }
@@ Expand Down @@