implemented stripe for the cloud instance

components/Modal/User/ChangePassword.tsx

@@ -80,7 +80,7 @@ export default function ChangePassword({
           value={newPassword}
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
-          placeholder="***********"
+          placeholder="••••••••••••••"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
         <p className="text-sm text-sky-500">Confirm New Password</p>
@@ -89,7 +89,7 @@ export default function ChangePassword({
           value={newPassword2}
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
-          placeholder="***********"
+          placeholder="••••••••••••••"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 

components/Modal/User/ProfileSettings.tsx

@@ -16,7 +16,7 @@ type Props = {
   user: AccountSettings;
 };
 
-const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 export default function ProfileSettings({
   toggleSettingsModal,
@@ -165,7 +165,7 @@ export default function ProfileSettings({
             />
           </div>
 
-          {EmailProvider ? (
+          {emailEnabled ? (
             <div>
               <p className="text-sm text-sky-500 mb-2">Email</p>
               <input

components/Sidebar.tsx

@@ -60,7 +60,7 @@ export default function Sidebar({ className }: { className?: string }) {
             active === "/dashboard"
               ? "bg-sky-200"
               : "hover:bg-slate-200 bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1`}
+          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
             icon={faChartSimple}
@@ -81,7 +81,9 @@ export default function Sidebar({ className }: { className?: string }) {
             icon={faLink}
             className={`w-8 h-8 drop-shadow text-sky-500`}
           />
-          <p className="text-sky-600 text-xs font-semibold">All Links</p>
+          <p className="text-sky-600 text-xs font-semibold">
+            <span className="hidden xl:inline-block">All</span> Links
+          </p>
         </Link>
 
         <Link