Merge pull request #140 from Lulalaby/fix/various-fixes

fix: various bugs
peterhanania · Jan 8, 2024 · 115e22c · 115e22c
2 parents 672eb84 + 27f3401
commit 115e22c
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 35 deletions.
diff --git a/TODO b/TODO
@@ -1 +1,2 @@
-// USE NEXT-SEO
+// USE NEXT-SEO
+// Fix: Customize Options whitemode
diff --git a/components/Data.tsx b/components/Data.tsx
@@ -11839,8 +11839,8 @@ export default function Data({ data, demo }: any): ReactElement {
                             key={i}
                             className="lg:inline-flex md:inline-flex lg:text-xl md:text-xl text-sm"
                           >
-                            - {data?.dataFile ? "They " : "You "} send ~
-                            {data?.statistics[t].day} Average Messages messages
+                            - {data?.dataFile ? "They " : "You "} send
+                            an average of {data?.statistics[t].day} messages
                             per day, {data?.statistics[t].week} messages per
                             week, {data?.statistics[t].month} messages per
                             month, and {data?.statistics[t].year} messages per
@@ -11906,7 +11906,10 @@ export default function Data({ data, demo }: any): ReactElement {
                       className="ml-2 p-1 hover:bg-[#2b2d31] hover:opacity-100 opacity-60 rounded-lg group-hover:block hidden w-8"
                       onClick={(e) => {
                         e.preventDefault();
-                        document.getElementById("popup__1")?.remove();
+                        const popup = document.getElementById("popup__1");
+                        if (popup) {
+                          popup.remove();
+                        }
                       }}
                     >
                       <svg

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -20,7 +20,7 @@ export default function Header() {
       id: 1,
       name: "English",
       avatar:
-        "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png",
+        "https://i.imgur.com/sACh65I.png",
     },
   ];
   const [selected, setSelected] = useState(countries[0]);
@@ -527,10 +527,10 @@ export default function Header() {
           <div className="flex items-center justify-center min-h-screen">
             <Dialog.Overlay className="fixed inset-0  bg-black/30" />
             <div className="relative p-4 w-full max-w-4xl md:h-auto h-full">
-              <div className="relative shadow-lg bg-[#36393f] ">
-                <div className="flex justify-between items-center p-5 rounded-t bg-[#2b2d31]">
+              <div className="relative shadow-lg dark:bg-[#36393f] bg-[#d1d5db]">
+                <div className="flex justify-between items-center p-5 rounded-t dark:bg-[#2b2d31] bg-[#eeeeee]">
                   <h3
-                    className="text-xl font-medium text-white uppercase"
+                    className="text-xl font-medium dark:text-white text-black uppercase"
                     style={{
                       fontFamily:
                         "Ginto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif",
@@ -561,7 +561,7 @@ export default function Header() {
                 </div>
 
                 <div className="overflow-y-auto h-[280px]">
-                  <div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 text-white font-bold text-lg">
+                  <div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 dark:text-white text-black font-bold text-lg">
                     THEME
                     <br />
                     <div
@@ -580,7 +580,7 @@ export default function Header() {
                         onChange={() => {}}
                         checked={theme === "dark"}
                       />
-                      <label htmlFor="dark">Dark</label>
+                      <label htmlFor="dark" className={theme === "light" ? "light" : ""}>Dark</label>
                     </div>
                     <div
                       className="toggle"
@@ -598,7 +598,7 @@ export default function Header() {
                         onChange={() => {}}
                         checked={theme === "light"}
                       />
-                      <label htmlFor="light">Light</label>
+                      <label htmlFor="light" className={theme === "light" ? "light" : ""}>Light</label>
                     </div>
                     <br />
                     Language
@@ -718,23 +718,23 @@ export default function Header() {
                           }}
                           id={"debug"}
                           type="checkbox"
-                          className="w-4 h-4 text-blue-600 bg-gray-100 rounded  border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                          className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                         />
                         <label
                           htmlFor={"debug"}
-                          className="pl-2 font-medium text-white font-mono"
+                          className="pl-2 font-medium dark:text-white text-black font-mono"
                           style={{
                             fontSize: "18px",
                           }}
                         >
-                          Turn debug mode on (recommended)
+                          Turn on debug mode (recommended)
                         </label>
                       </div>
                     </div>
                   </div>
                 </div>
 
-                <div className="flex items-center p-6 space-x-2 rounded-b bg-[#2b2d31]">
+                <div className="flex items-center p-6 space-x-2 rounded-b dark:bg-[#2b2d31] bg-[#eeeeee]">
                   <button
                     onClick={() => {
                       setSettings(false);

diff --git a/components/Upload.tsx b/components/Upload.tsx
@@ -3474,6 +3474,13 @@ export default function Upload(): ReactElement {
               </defs>
             </svg>
           </Tippy>
+        </div>
+      </div>
+    </>
+  );
+}
+/* 
+The close button breaks stuff
           <Tippy
             zIndex={99999999999999}
             content={"Close"}
@@ -3483,10 +3490,17 @@ export default function Upload(): ReactElement {
             <div className="ml-3 justify-center items-center">
               <div
                 className="hover:bg-[#232323] p-1 hover:opacity-100 opacity-60 rounded-lg group-hover:block hidden"
-                onClick={() => {
+                onClick={(e) => {
+                  e.preventDefault();
                   const madeBy = document.getElementById("made_by");
                   if (madeBy) {
-                    madeBy.remove();
+                    try {
+                      madeBy.remove();
+                    }
+                    catch(e)
+                    {
+                      console.error(e);
+                    }
                   }
                 }}
               >
@@ -3501,8 +3515,4 @@ export default function Upload(): ReactElement {
               </div>
             </div>
           </Tippy>
-        </div>
-      </div>
-    </>
-  );
-}
+*/
diff --git a/components/settings.tsx b/components/settings.tsx
@@ -16,7 +16,7 @@ export default function Settings(): ReactElement {
       id: 1,
       name: "English",
       avatar:
-        "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png",
+        "https://i.imgur.com/sACh65I.png",
     },
   ];
   const [selected, setSelected] = useState(countries[0]);
@@ -47,10 +47,10 @@ export default function Settings(): ReactElement {
           <div className="flex items-center justify-center min-h-screen">
             <Dialog.Overlay className="fixed inset-0  bg-black/30" />
             <div className="relative p-4 w-full max-w-4xl md:h-auto h-full">
-              <div className="relative shadow-lg bg-[#36393f] ">
-                <div className="flex justify-between items-center p-5 rounded-t bg-[#2b2d31]">
+              <div className="relative shadow-lg dark:bg-[#36393f] bg-[#d1d5db]">
+                <div className="flex justify-between items-center p-5 rounded-t dark:bg-[#2b2d31] bg-[#eeeeee]">
                   <h3
-                    className="text-xl font-medium text-white uppercase"
+                    className="text-xl font-medium dark:text-white text-black uppercase"
                     style={{
                       fontFamily:
                         "Ginto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif",
@@ -63,7 +63,7 @@ export default function Settings(): ReactElement {
                       setSettings(false);
                     }}
                     type="button"
-                    className="text-gray-400 bg-transparent hover:bg-[#2f3136] hover:text-gray-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center "
+                    className="dark:text-gray-400 text-black-400 bg-transparent hover:bg-[#2f3136] hover:text-gray-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center "
                   >
                     <svg
                       className="w-5 h-5"
@@ -81,7 +81,7 @@ export default function Settings(): ReactElement {
                 </div>
 
                 <div className="overflow-y-auto h-[280px]">
-                  <div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 text-white font-bold text-lg">
+                  <div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 dark:text-white text-black font-bold text-lg">
                     THEME
                     <br />
                     <div
@@ -100,7 +100,7 @@ export default function Settings(): ReactElement {
                         onChange={() => {}}
                         checked={theme === "dark"}
                       />
-                      <label htmlFor="dark">Dark</label>
+                      <label htmlFor="dark" className={theme === "light" ? "light" : ""}>Dark</label>
                     </div>
                     <div
                       className="toggle"
@@ -118,7 +118,7 @@ export default function Settings(): ReactElement {
                         onChange={() => {}}
                         checked={theme === "light"}
                       />
-                      <label htmlFor="light">Light</label>
+                      <label htmlFor="light" className={theme === "light" ? "light" : ""}>Light</label>
                     </div>
                     <br />
                     Language
@@ -138,13 +138,13 @@ export default function Settings(): ReactElement {
                                       alt=""
                                       className="flex-shrink-0 h-6 w-6 rounded-full"
                                     />
-                                    <span className="ml-3 block truncate text-slate-900 dark:text-white">
+                                    <span className="ml-3 block truncate text-slate-900 dark:text-white text-black">
                                       {selected.name}
                                     </span>
                                   </span>
                                   <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                                     <SelectorIcon
-                                      className="h-5 w-5 text-gray-400"
+                                      className="h-5 w-5 dark:text-gray-400 text-white:400"
                                       aria-hidden="true"
                                     />
                                   </span>
@@ -225,7 +225,7 @@ export default function Settings(): ReactElement {
                   </div>
                 </div>
 
-                <div className="flex items-center p-6 space-x-2 rounded-b bg-[#2b2d31]">
+                <div className="flex items-center p-6 space-x-2 rounded-b dark:bg-[#2b2d31] bg-[#eeeeee]">
                   <button
                     onClick={() => {
                       setSettings(false);

diff --git a/next.config.js b/next.config.js
@@ -8,7 +8,6 @@ const nextConfig = {
   },
   images: {
     domains: [
-      "upload.wikimedia.org",
       "cdn.discordapp.com",
       "i.imgur.com",
       "better-default-discord.netlify.app",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -45,7 +45,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       setLoading(false);
     }, 1000);
     console.log(
-      "%c🚀 Welcome to Discord Package 🚀\nPlease Report bugs to Peter_#4444",
+      "%c🚀 Welcome to Discord Package 🚀\nPlease Report bugs to @peterhanania",
       "font-size: 1.5rem; font-weight: bold; color: #fff; background: #000; padding: 0.5rem;"
     );
     console.log(

diff --git a/pages/styles/index.css b/pages/styles/index.css
@@ -475,17 +475,36 @@ input[type="search"]:focus {
   cursor: pointer;
 }
 
+.toggle.light {
+  color: rgb(0, 0, 0);
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
 .toggle label {
   margin-left: 5px;
   color: rgb(228, 217, 217);
   cursor: pointer;
   pointer-events: none;
 }
 
+.toggle label.light {
+  margin-left: 5px;
+  color: rgb(11, 0, 0);
+  cursor: pointer;
+  pointer-events: none;
+}
+
 .toggle input:checked + label {
   color: rgb(255, 255, 255);
 }
 
+.light {
+  color: rgb(0, 0, 0) !important;
+}
+
 .tippy-content {
   pointer-events: all !important;
 }