Merge pull request #283 from mgguild/revert-279-update-web-fixes

Revert "Update React-website fixes"
mgguild · Oct 25, 2023 · fc9ab8f · fc9ab8f
2 parents f37b03b + c990938
commit fc9ab8f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 94 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1972,11 +1972,6 @@ h1,
   font-size: 2.5rem;
 }
 
-h2
-.h2{
-  font-size: 2.1rem;
-}
-
 h1,
 h2,
 h3,
@@ -2507,27 +2502,3 @@ form input {
   color: #fff;
 }
 
-.statRateContainer {
-  display: flex;
-  width: 100%;
-  gap: 0.5rem;
-}
-
-@media (max-width: 820px) {
-  .statRateContainer {
-      margin-right: 0.5rem;
-      margin-left: 0.5rem;
-  }
-}
-
-.stats{
-  width: 100%;
-}
-  @media (max-width: 820px) {
-    .stats {
-      flex: 0 0 16.6667%;
-      max-width: 30.6667%;
-      padding: 0%;
-    }
-  }
-
diff --git a/src/Components/Pages/Lore.tsx b/src/Components/Pages/Lore.tsx
@@ -3,34 +3,6 @@ import { SectHdr, TitleCard, SectCont } from '../Styled';
 import { useState, useMemo } from 'react';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { Carousel } from 'react-responsive-carousel';
-import React from 'react';
-
-const CustomCarousel = styled(Carousel)`
-  .control-arrow {
-    background-color: transparent; 
-  }
-
-  .control-arrow:before {
-    color: #FFFFFF; 
-    font-size: 50px; 
-    
-    @media (max-width: 820px){
-        font-size: 32px;
-    } 
-    @media (max-width: 575px) {
-        font-size: 20px;
-    }
-  }
-
-  .control-prev.control-arrow:before {
-    content: '🞀'; 
-  }
-
-  .control-next.control-arrow:before {
-    content: '🞂';
-  }
-`;
-
 
 const CarouselCont = styled.div`
     display: table-cell;
@@ -49,7 +21,7 @@ const Scroll = styled.div<{ isScreen800?: boolean }>`
         color: #ecb602;
 
         @media (max-width: 1025px) {
-            font-size: 39px;
+            font-size: 80px;
         }
 
         @media (max-width: 800px) {
@@ -68,7 +40,7 @@ const Scroll = styled.div<{ isScreen800?: boolean }>`
         text-align: center;
 
         @media (max-width: 1025px) {
-            font-size: 0.93rem;
+            font-size: 1.75rem;
         }
 
         @media (max-width: 800px) {
@@ -83,14 +55,12 @@ const Scroll = styled.div<{ isScreen800?: boolean }>`
     }
 `;
 
-
 const DemoCarousel: React.FC<{ isScreen800: boolean; isScreen650: boolean }> = ({
     isScreen800,
     isScreen650,
 }) => {
     return (
-        <CustomCarousel showThumbs={false}
-        >
+        <Carousel showThumbs={false}>
             <div style={{ position: 'relative' }}>
                 <img
                     src={require(`../../Assets/img/${
@@ -144,7 +114,7 @@ const DemoCarousel: React.FC<{ isScreen800: boolean; isScreen650: boolean }> = (
                     </p>
                 </Scroll>
             </div>
-        </CustomCarousel>
+        </Carousel>
     );
 };
 

diff --git a/src/Components/Pages/NFTs.tsx b/src/Components/Pages/NFTs.tsx
@@ -7,40 +7,24 @@ const Content = styled.div`
     display: flex;
     flex-flow: column nowrap;
     width: 100%;
-    @media (max-width: 820px) { 
-        flex: 7 0 25%;
-    }
 `;
 
 const RowChar = styled.div`
     display: flex;
     position: relative;
     flex-wrap: nowrap;
-    margin-right: 4.5rem;
-    margin-left: 6.5rem;
+    margin-right: 1.5rem;
+    margin-left: 1.5rem;
     gap: 2rem;
     justify-content: center;
 
-    @media (max-width: 820px) { 
-        margin-right: 2rem;
-        margin-left: 8rem;
-        gap: 3rem;
-    }
-
     img {
         display: block;
         height: auto;
         max-width: 100%;
         width: 100%;
         object-fit: cover;
-
-        @media (max-width: 820px) { 
-            margin-right: 14rem;
-            margin-left: -6rem;
-        }
     }
-    
-   
 `;
 
 const ColumnChar = styled.div`
@@ -71,12 +55,9 @@ const NFTClasses = styled.div<{ isScreen575?: boolean }>`
         flex-flow: row wrap;
         overflow: scroll;
         max-width: 100%;
-        gap: 0.37rem
     }
 `;
 
-
-
 const NFTClass = styled.div<{ img: string }>`
     position: relative;
     border: 5px solid #4acae8;
@@ -128,9 +109,8 @@ const StatRate: React.FC<{ count: number }> = ({ count }) => {
     }
 
     return (
-        <div style={{ display: 'flex', width: '100%', gap: '0.5rem' }} className="statRateContainer" >{statRate}</div>
+        <div style={{ display: 'flex', width: '100%', gap: '0.5rem' }}>{statRate}</div>
     );
-
 };
 
 const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({
@@ -153,8 +133,8 @@ const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({
             <div className="page-section" id="nftCharacters">
                 {/* About Heading */}
                 <SectHdr>
-                    <TitleCard className='titleCard' padding="3rem 2rem">
-                        <h1 style={{ fontSize: "2.1rem" }} >NFT Characters</h1>
+                    <TitleCard className='titleCard' padding="3rem">
+                        <h1>NFT Characters</h1>
                     </TitleCard>
                 </SectHdr>
                 <SectCont margin="auto">
@@ -292,9 +272,9 @@ const App: React.FC<{ isScreen800: boolean; isScreen550: boolean }> = ({
                                     key={selectedClass}
                                     style={{
                                         flex: '0 0 16.6666666667%',
+                                        maxWidth: '17.6666666667%',
                                         padding: '0%',
                                     }}
-                                    className='stats'
                                 >
                                     <p style={{ margin: '0 0 0.5rem 0' }}>
                                         Physical Damage

diff --git a/src/Components/Pages/Partners.tsx b/src/Components/Pages/Partners.tsx
@@ -5,11 +5,6 @@ import { SectHdr, TitleCard, SectCont } from '../Styled';
 const Card = styled.div`
     max-width: 14.5rem;
   
-    @media (max-width: 1025px) {
-        max-width: 13.5rem;
-        padding: 1rem;
-    }
-
     @media (max-width: 800px) {
         max-width: 9rem;
         padding: 1rem;