fix: Revert "fix: Optimize UI for smaller screens" (keephq#1253)

pehlicd · Jun 18, 2024 · 4edfbf2 · 4edfbf2
2 parents b451994 + 6fa7c74
commit 4edfbf2
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 40 deletions.
diff --git a/keep-ui/app/extraction/extraction.tsx b/keep-ui/app/extraction/extraction.tsx
@@ -23,13 +23,13 @@ export default function Extraction() {
         Beta
       </Badge>
       <div className="flex divide-x p-2">
-        <div className="w-2/3 pr-2.5">
+        <div className="w-1/3 pr-2.5">
           <CreateOrUpdateExtractionRule
             extractionToEdit={extractionToEdit}
             editCallback={setExtractionToEdit}
           />
         </div>
-        <div className="w-1/3 pl-2.5">
+        <div className="w-2/3 pl-2.5">
           {isLoading ? (
             <Loading />
           ) : extractions && extractions.length > 0 ? (

diff --git a/keep-ui/app/providers/provider-form.tsx b/keep-ui/app/providers/provider-form.tsx
@@ -642,7 +642,7 @@ const ProviderForm = ({
         </form>
       </div>
 
-      <div className="flex justify-end mt-5 pb-4">
+      <div className="flex justify-end mt-5">
         <Button
           variant="secondary"
           color="orange"

diff --git a/keep-ui/app/providers/provider-tile.tsx b/keep-ui/app/providers/provider-tile.tsx
@@ -90,7 +90,7 @@ const getEmptyDistribution = () => {
 export default function ProviderTile({ provider, onClick }: Props) {
   return (
     <div
-      className="tile-basis relative group flex justify-around items-center bg-white rounded-lg shadow h-44 hover:shadow-lg hover:grayscale-0 cursor-pointer p-2"
+      className="tile-basis relative group flex justify-around items-center bg-white rounded-lg shadow h-44 hover:shadow-lg hover:grayscale-0 cursor-pointer"
       onClick={onClick}
     >
       <div className="w-48">
@@ -110,9 +110,9 @@ export default function ProviderTile({ provider, onClick }: Props) {
             icon={OAuthIcon}
             className={`absolute top-[-15px] ${
               provider.can_setup_webhook || provider.supports_webhook
-              ? "right-[-0px]"
-              : "right-[-15px]"
-              } grayscale hover:grayscale-0 group-hover:grayscale-0`}
+                ? "right-[-0px]"
+                : "right-[-15px]"
+            } grayscale hover:grayscale-0 group-hover:grayscale-0`}
             color="green"
             size="sm"
             tooltip="OAuth2 available"
@@ -124,7 +124,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
           </Text>
         ) : null}
         {provider.linked ? (
-          <Text color={"green"} className="flex text-xs md:top-3 md:left-2">
+          <Text color={"green"} className="flex text-xs">
             Linked
           </Text>
         ) : null}
@@ -133,7 +133,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
             <Title
               className={`${
                 !provider.linked ? "group-hover:hidden" : ""
-                } capitalize`}
+              } capitalize`}
               title={provider.details?.name}
             >
               {provider.display_name}{" "}
@@ -159,8 +159,8 @@ export default function ProviderTile({ provider, onClick }: Props) {
               <br></br>
             )}
             {(provider.installed || provider.linked) &&
-              provider.alertsDistribution &&
-              provider.alertsDistribution.length > 0 ? (
+            provider.alertsDistribution &&
+            provider.alertsDistribution.length > 0 ? (
               <SparkAreaChart
                 data={addOneToDistribution(provider.alertsDistribution)}
                 categories={["number"]}
@@ -170,7 +170,7 @@ export default function ProviderTile({ provider, onClick }: Props) {
                 autoMinValue={true}
                 className={`${
                   !provider.linked ? "group-hover:hidden" : ""
-                  } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
+                } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
               />
             ) : provider.installed || provider.linked ? (
               <SparkAreaChart
@@ -180,26 +180,26 @@ export default function ProviderTile({ provider, onClick }: Props) {
                 colors={["orange"]}
                 className={`${
                   !provider.linked ? "group-hover:hidden" : ""
-                  } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
+                } mt-2 h-8 w-20 sm:h-10 sm:w-36`}
                 autoMinValue={true}
                 maxValue={1}
               />
             ) : null}
           </div>
-          <div className="labels flex flex-col group-hover:hidden">
+          <div className="labels flex group-hover:hidden">
             {!provider.installed &&
               !provider.linked &&
               provider.tags.map((tag) => {
                 const icon =
                   tag === "alert"
                     ? BellAlertIcon
                     : tag === "data"
-                      ? CircleStackIcon
-                      : tag === "ticketing"
-                        ? TicketIcon
-                        : tag === "queue"
-                          ? QueueListIcon
-                          : ChatBubbleBottomCenterIcon;
+                    ? CircleStackIcon
+                    : tag === "ticketing"
+                    ? TicketIcon
+                    : tag === "queue"
+                    ? QueueListIcon
+                    : ChatBubbleBottomCenterIcon;
                 return (
                   <Badge
                     key={tag}
@@ -225,20 +225,18 @@ export default function ProviderTile({ provider, onClick }: Props) {
           )}
         </div>
       </div>
-      <div className="flex justify-center items-center">
-        <ImageWithFallback
-          src={`/icons/${provider.type}-icon.png`}
-          fallbackSrc={`/icons/keep-icon.png`}
-          width={48}
-          height={48}
-          alt={provider.type}
+      <ImageWithFallback
+        src={`/icons/${provider.type}-icon.png`}
+        fallbackSrc={`/icons/keep-icon.png`}
+        width={48}
+        height={48}
+        alt={provider.type}
         className={`${
           provider.installed || provider.linked
-              ? ""
-              : "grayscale group-hover:grayscale-0"
-            } max-w-full max-h-full object-contain`}
-        />
-      </div>
+            ? ""
+            : "grayscale group-hover:grayscale-0"
+        }`}
+      />
     </div>
   );
 }
diff --git a/keep-ui/app/rules/CorrelationPlaceholder.tsx b/keep-ui/app/rules/CorrelationPlaceholder.tsx
@@ -27,7 +27,7 @@ export const CorrelationPlaceholder = () => {
         >
           Create Correlation
         </Button>
-        <PlaceholderSankey className="w-full h-auto"/>
+        <PlaceholderSankey />
       </Card>
       <CorrelationSidebar
         isOpen={isSidebarOpen}

diff --git a/keep-ui/app/rules/PlaceholderSankey.tsx b/keep-ui/app/rules/PlaceholderSankey.tsx
@@ -6,7 +6,6 @@ export const PlaceholderSankey = (props: any) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}
   >
     <path
       d="M498.554 1.81818V12H497.321V3.1108H497.262L494.776 4.76136V3.50852L497.321 1.81818H498.554ZM504.863 12.1392C504.446 12.1326 504.028 12.053 503.611 11.9006C503.193 11.7481 502.812 11.4912 502.467 11.13C502.122 10.7654 501.846 10.2732 501.637 9.65341C501.428 9.0303 501.324 8.24811 501.324 7.30682C501.324 6.4053 501.408 5.60653 501.577 4.91051C501.746 4.21117 501.991 3.62287 502.313 3.1456C502.634 2.66501 503.022 2.30043 503.476 2.05185C503.934 1.80327 504.449 1.67898 505.022 1.67898C505.593 1.67898 506.1 1.79332 506.544 2.02202C506.991 2.2474 507.356 2.56226 507.638 2.96662C507.919 3.37098 508.102 3.83665 508.184 4.36364H506.971C506.859 3.90625 506.64 3.52675 506.315 3.22514C505.99 2.92353 505.559 2.77273 505.022 2.77273C504.234 2.77273 503.612 3.11577 503.158 3.80185C502.707 4.48793 502.48 5.45076 502.477 6.69034H502.557C502.742 6.40862 502.963 6.16832 503.218 5.96946C503.476 5.76728 503.761 5.61151 504.073 5.50213C504.384 5.39276 504.714 5.33807 505.062 5.33807C505.646 5.33807 506.179 5.4839 506.663 5.77557C507.147 6.06392 507.535 6.4633 507.826 6.97372C508.118 7.48082 508.264 8.0625 508.264 8.71875C508.264 9.34848 508.123 9.92519 507.841 10.4489C507.56 10.9692 507.164 11.3835 506.653 11.6918C506.146 11.9967 505.549 12.1458 504.863 12.1392ZM504.863 11.0455C505.281 11.0455 505.656 10.9411 505.987 10.7322C506.322 10.5234 506.585 10.2434 506.777 9.89205C506.973 9.54072 507.071 9.14962 507.071 8.71875C507.071 8.29782 506.976 7.91501 506.787 7.57031C506.602 7.2223 506.345 6.94555 506.017 6.74006C505.692 6.53456 505.321 6.43182 504.903 6.43182C504.588 6.43182 504.295 6.49479 504.023 6.62074C503.751 6.74337 503.513 6.91241 503.307 7.12784C503.105 7.34328 502.946 7.5902 502.83 7.86861C502.714 8.1437 502.656 8.43371 502.656 8.73864C502.656 9.14299 502.75 9.52083 502.939 9.87216C503.132 10.2235 503.393 10.5069 503.725 10.7223C504.06 10.9377 504.439 11.0455 504.863 11.0455ZM513.659 12.1392C513.003 12.1392 512.418 12.0265 511.904 11.8011C511.394 11.5758 510.988 11.2625 510.686 10.8615C510.388 10.4571 510.226 9.98816 510.199 9.45455H511.452C511.478 9.78267 511.591 10.0661 511.79 10.3047C511.989 10.54 512.249 10.7223 512.571 10.8516C512.892 10.9808 513.248 11.0455 513.639 11.0455C514.077 11.0455 514.465 10.9692 514.803 10.8168C515.141 10.6643 515.406 10.4522 515.598 10.1804C515.791 9.90862 515.887 9.59375 515.887 9.2358C515.887 8.86127 515.794 8.53149 515.608 8.24645C515.423 7.9581 515.151 7.73272 514.793 7.57031C514.435 7.40791 513.997 7.3267 513.48 7.3267H512.665V6.23295H513.48C513.885 6.23295 514.239 6.16004 514.544 6.0142C514.853 5.86837 515.093 5.66288 515.265 5.39773C515.441 5.13258 515.529 4.82102 515.529 4.46307C515.529 4.11837 515.452 3.81842 515.3 3.56321C515.148 3.308 514.932 3.10914 514.654 2.96662C514.379 2.8241 514.054 2.75284 513.679 2.75284C513.328 2.75284 512.996 2.81747 512.685 2.94673C512.377 3.07268 512.125 3.25663 511.929 3.49858C511.734 3.73722 511.628 4.02557 511.611 4.36364H510.418C510.438 3.83002 510.599 3.36269 510.9 2.96165C511.202 2.55729 511.596 2.24242 512.083 2.01705C512.574 1.79167 513.112 1.67898 513.699 1.67898C514.329 1.67898 514.869 1.80658 515.32 2.06179C515.771 2.31368 516.117 2.64678 516.359 3.06108C516.601 3.47538 516.722 3.92282 516.722 4.40341C516.722 4.9768 516.571 5.46567 516.269 5.87003C515.971 6.27438 515.565 6.55445 515.051 6.71023V6.78977C515.694 6.89583 516.197 7.16927 516.558 7.61009C516.919 8.04759 517.1 8.58949 517.1 9.2358C517.1 9.7893 516.949 10.2865 516.647 10.7273C516.349 11.1648 515.941 11.5095 515.424 11.7614C514.907 12.0133 514.319 12.1392 513.659 12.1392Z"

diff --git a/keep-ui/app/settings/webhook-settings.tsx b/keep-ui/app/settings/webhook-settings.tsx
@@ -160,12 +160,10 @@ req.end();
       <Title>Webhook Settings</Title>
       <Subtitle>View your tenant webhook settings</Subtitle>
       <Card className="mt-2.5">
-        <div className="flex  flex-col divide-x gap-y-2">
-          <div className="flex-1 pr-1 flex flex-row gap-y-2 justify-between">
-            <div className="flex flex-col">
-              <Title>URL: {data.webhookApi}</Title>
-              <Subtitle>API Key: {data.apiKey}</Subtitle>
-            </div>
+        <div className="flex divide-x">
+          <div className="flex-1 pr-2 flex flex-col gap-y-2">
+            <Title>URL: {data.webhookApi}</Title>
+            <Subtitle>API Key: {data.apiKey}</Subtitle>
             <div>
               <Button icon={PlayIcon} color="orange" onClick={tryNow}>
                 Click to create an example Alert