data operations buttons size fixed

shadowmere-xyz · May 4, 2024 · c09fa58 · c09fa58
1 parent cc8e877
commit c09fa58
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/components/serverCol.tsx b/components/serverCol.tsx
@@ -51,7 +51,7 @@ export default function ServerCol(dataServer: { proxy: any }) {
     <div
       ref={ref}
       onMouseMoveCapture={handleMoveCapture}
-      className={`item-server-vpn relative overflow-hidden w-auto h-24 sm:h-24 bg-white dark:bg-[#212121] dark:text-[#cfcfcf] rounded-lg shrink-0 flex items-center justify-between px-4 py-2 md:py-4 hover:cursor-pointer hover:-translate-y-[2px]  transition-all border border-[#e0e0e0] dark:border-[#303030] hover:border-[#3a3a3a] dark:hover:border-[#3a3a3a] after:blur-3xl backdrop-blur-sm duration-300 ${
+      className={`item-server-vpn relative overflow-hidden w-auto h-24 sm:h-24 bg-white dark:bg-[#212121] dark:text-[#cfcfcf] rounded-lg shrink-0 flex items-center justify-between px-4 py-3 md:py-4 hover:cursor-pointer hover:-translate-y-[2px]  transition-all border border-[#e0e0e0] dark:border-[#303030] hover:border-[#3a3a3a] dark:hover:border-[#3a3a3a] after:blur-3xl backdrop-blur-sm duration-300 ${
         viewMode === "details" && "col-span-12"
       } ${viewMode === "cols" && "col-span-6"} `}
     >
@@ -139,11 +139,11 @@ export default function ServerCol(dataServer: { proxy: any }) {
         </div>
       </div>
       {/* onMouseMove={(e:any)=>e.stopPropagation()} */}
-      <div className="data-operations gap-4 flex flex-row-reverse items-center">
+      <div className="data-operations h-full gap-2 md:gap-4 flex flex-row-reverse items-end md:items-center">
         <div
           title="Copy"
           data-umami-event={"Copy"}
-          className="opt-copiar w-4 h-4 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
+          className="opt-copiar w-8 h-8 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
           onClick={() => {
             navigator.clipboard
               .writeText(
@@ -162,25 +162,25 @@ export default function ServerCol(dataServer: { proxy: any }) {
               });
           }}
         >
-          {timeCopy ? <IconCheck /> : <IconClipboard />}
+          {timeCopy ? <IconCheck size={"24"} /> : <IconClipboard size={"24"} />}
         </div>
 
         <button
           onClick={handleQR}
           data-umami-event={"QR"}
           title="QR Code"
-          className="opt-codigo-qr w-4 h-4 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
+          className="opt-codigo-qr w-8 h-8 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
         >
-          <IconQrcode />
+          <IconQrcode size={"24"} />
         </button>
 
         <Link
           title="Download"
           data-umami-event={"Download"}
           href={`https://shadowmere.akiel.dev/${dataServer.proxy.id}/config`}
-          className="opt-descargar w-4 h-4 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
+          className="opt-descargar w-8 h-8 sm:w-10 sm:h-10 rounded-md flex items-center justify-center cursor-pointer hover:bg-[#EBEBEB] dark:hover:bg-[#1B1B1B] active:bg-[#D7D7D7] dark:active:bg-[#111111] transition-all duration-150 active:scale-[95%]"
         >
-          <IconDownload />
+          <IconDownload size={"24"} />
         </Link>
       </div>
     </div>

diff --git a/components/support-side.tsx b/components/support-side.tsx
@@ -31,7 +31,7 @@ export default function SupportSide(props: PanelProps) {
   const [mouseOver, setMouseOver] = useState(false);
 
   return (
-    <div className={`sidebar col-span-12 xl:col-span-3 w-full h-fit 2xl:h-fit mb-4 bg-white dark:bg-[#212121] dark:text-[#cfcfcf] ${props.visibleResponsive == 'desktop' && 'hidden xl:flex'} ${props.visibleResponsive == 'mobile' && 'xl:hidden flex'} flex-col xl:flex-col gap-6 p-4 rounded-lg border border-[#e0e0e0] dark:border-[#303030]`}>
+    <div className={`sidebar col-span-12 xl:col-span-3 w-full h-fit 2xl:h-fit mb-4 bg-white dark:bg-[#212121] dark:text-[#cfcfcf] ${props.visibleResponsive == 'desktop' && 'hidden xl:flex'} ${props.visibleResponsive == 'mobile' && 'xl:hidden flex text-sm'} flex-col xl:flex-col gap-6 p-4 rounded-lg border border-[#e0e0e0] dark:border-[#303030]`}>
       <div className="flex gap-4 justify-between">
         <div className="relative w-full h-[209px] rounded-md bg-slate-200">
           <Image