chore(3000): Clean up support panel (#18968)

* chore(3000): Clean up support panel

* Adjust panel button shadows

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/container-images-ci.yml

@@ -14,7 +14,7 @@ jobs:
         permissions:
             id-token: write # allow issuing OIDC tokens for this workflow run
             contents: read # allow at least reading the repo contents, add other permissions if necessary
-    
+
         steps:
             # If this run wasn't initiated by PostHog Bot (meaning: snapshot update),
             # cancel previous runs of snapshot update-inducing workflows

.github/workflows/pr-cleanup.yml

@@ -43,23 +43,23 @@ jobs:
             - name: Delete hobby deployment
               id: cleanup
               run: |
-                aws eks update-kubeconfig --name "posthog-dev"
-                kubectl config set-cluster arn:aws:eks:us-east-1:169684386827:cluster/posthog-dev --server=https://eks-posthog-dev --tls-server-name 8BD6E1D2FEBDE47C8177E29CAC9E6C61.gr7.us-east-1.eks.amazonaws.com
+                  aws eks update-kubeconfig --name "posthog-dev"
+                  kubectl config set-cluster arn:aws:eks:us-east-1:169684386827:cluster/posthog-dev --server=https://eks-posthog-dev --tls-server-name 8BD6E1D2FEBDE47C8177E29CAC9E6C61.gr7.us-east-1.eks.amazonaws.com
 
-                export PR_NUM=${{ github.event.number }}
-                export BRANCH_NAME=${{ github.head_ref }}
-                export BRANCH_NAME_HASH=$(echo -n ${{ github.head_ref }} | md5sum | cut -c 1-8)
-                export HOSTNAME=pr-$PR_NUM-${BRANCH_NAME_HASH}
-                export HOSTNAME=${HOSTNAME:0:38}
-                export HOSTNAME=${HOSTNAME%%-}
-                export NAMESPACE="hobby"
-                export REGISTRY_URL=${{ steps.aws-ecr.outputs.registry }}/pr-test
-                export DOCKER_TAG=${{ github.event.pull_request.head.sha }}
+                  export PR_NUM=${{ github.event.number }}
+                  export BRANCH_NAME=${{ github.head_ref }}
+                  export BRANCH_NAME_HASH=$(echo -n ${{ github.head_ref }} | md5sum | cut -c 1-8)
+                  export HOSTNAME=pr-$PR_NUM-${BRANCH_NAME_HASH}
+                  export HOSTNAME=${HOSTNAME:0:38}
+                  export HOSTNAME=${HOSTNAME%%-}
+                  export NAMESPACE="hobby"
+                  export REGISTRY_URL=${{ steps.aws-ecr.outputs.registry }}/pr-test
+                  export DOCKER_TAG=${{ github.event.pull_request.head.sha }}
 
-                envsubst < .github/pr-deploy/hobby.yaml.tmpl > .github/pr-deploy/hobby.yaml
+                  envsubst < .github/pr-deploy/hobby.yaml.tmpl > .github/pr-deploy/hobby.yaml
 
-                #Clean and deploy
-                kubectl -n $NAMESPACE delete -f .github/pr-deploy/hobby.yaml || true
+                  #Clean and deploy
+                  kubectl -n $NAMESPACE delete -f .github/pr-deploy/hobby.yaml || true
 
             - name: delete deployment
               uses: bobheadxi/[email protected]

.github/workflows/pr-deploy.yml

@@ -35,7 +35,7 @@ jobs:
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
-    
+
             - uses: aws-actions/configure-aws-credentials@v1
               with:
                   aws-region: us-east-1

frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss

@@ -34,44 +34,66 @@
         // Stop the content from stealing focus whilst resizing
         pointer-events: none;
     }
+}
 
-    .SidePanel3000__bar {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: var(--side-panel-bar-width);
-        height: 100vh;
-        overflow: hidden;
-        user-select: none;
-        border-left-width: 1px;
+.SidePanel3000__bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: var(--side-panel-bar-width);
+    height: 100vh;
+    overflow: hidden;
+    user-select: none;
+    border-left-width: 1px;
+}
 
-        .SidePanel3000__tabs {
-            flex: 1;
-            width: var(--side-panel-bar-width);
-            overflow: hidden auto;
+.SidePanel3000__tabs {
+    flex: 1;
+    width: var(--side-panel-bar-width);
+    overflow: hidden auto;
 
-            &::-webkit-scrollbar {
-                display: none;
-            }
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
 
-            .SidePanel3000__tabsrotation {
-                display: flex;
-                gap: 0.25rem;
-                align-items: center;
-                height: var(--side-panel-bar-width);
-                margin-top: calc(calc(var(--side-panel-bar-width) - 0.25rem) * -1);
-                transform: rotate(90deg);
-                transform-origin: bottom left;
-            }
-        }
+.SidePanel3000__tabs-content {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    height: var(--side-panel-bar-width);
+    margin-top: calc(calc(var(--side-panel-bar-width) - 0.25rem) * -1);
+    transform: rotate(90deg);
+    transform-origin: bottom left;
+
+    // NOTE: The below overrides make is to that the shadows are below the buttons after rotation
+    // This is very very specific to SidePanel, hence !important is used universally
+    .LemonButton {
+        padding-right: 1px !important; // padding-bottom in regular buttons
+        padding-bottom: 0 !important;
     }
 
-    .SidePanel3000__content {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        height: 100vh;
-        overflow-y: auto;
-        border-left-width: 1px;
+    .LemonButton__chrome {
+        top: 0 !important;
+        left: -1px !important; // top in regular buttons
+        margin: -1px 0 !important; // x and y axes swapped from regular buttons
+        &:hover {
+            top: 0 !important;
+            left: -1.5px !important; // top in regular buttons
+        }
+
+        &:active {
+            top: 0 !important;
+            left: -0.5px !important; // top in regular buttons
+        }
     }
 }
+
+.SidePanel3000__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    border-left-width: 1px;
+}

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -136,7 +136,7 @@ export function SidePanel(): JSX.Element | null {
             <Resizer {...resizerLogicProps} />
             <div className="SidePanel3000__bar">
                 <div className="SidePanel3000__tabs">
-                    <div className="SidePanel3000__tabsrotation">
+                    <div className="SidePanel3000__tabs-content">
                         {visibleTabs.map((tab: SidePanelTab) => {
                             const { Icon, label } = SidePanelTabs[tab]
                             return (

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx

@@ -1,5 +1,6 @@
+import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { SupportForm, SupportFormButtons } from 'lib/components/Support/SupportForm'
+import { SupportForm } from 'lib/components/Support/SupportForm'
 import { supportLogic } from 'lib/components/Support/supportLogic'
 
 import { SidePanelTab } from '~/types'
@@ -20,9 +21,27 @@ export const SidePanelSupport = (): JSX.Element => {
 
             <div className="p-3 max-w-160 w-full mx-auto">
                 <SupportForm />
-                <div className="flex items-center justify-end gap-2 mt-4">
-                    <SupportFormButtons onClose={() => closeSupportForm()} />
-                </div>
+                <LemonButton
+                    form="support-modal-form"
+                    htmlType="submit"
+                    type="primary"
+                    data-attr="submit"
+                    fullWidth
+                    center
+                    className="mt-4"
+                >
+                    Submit
+                </LemonButton>
+                <LemonButton
+                    form="support-modal-form"
+                    type="secondary"
+                    onClick={closeSupportForm}
+                    fullWidth
+                    center
+                    className="mt-2"
+                >
+                    Cancel
+                </LemonButton>
             </div>
         </>
     )

frontend/src/lib/components/Support/SupportForm.tsx

@@ -1,10 +1,4 @@
-import {
-    LemonButton,
-    LemonInput,
-    LemonSegmentedButton,
-    LemonSegmentedButtonOption,
-    lemonToast,
-} from '@posthog/lemon-ui'
+import { LemonInput, LemonSegmentedButton, LemonSegmentedButtonOption, lemonToast } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { Field } from 'lib/forms/Field'
@@ -118,16 +112,3 @@ export function SupportForm(): JSX.Element | null {
         </Form>
     )
 }
-
-export function SupportFormButtons({ onClose }: { onClose: () => void }): JSX.Element {
-    return (
-        <>
-            <LemonButton form="support-modal-form" type="secondary" onClick={onClose}>
-                Cancel
-            </LemonButton>
-            <LemonButton form="support-modal-form" htmlType="submit" type="primary" data-attr="submit">
-                Submit
-            </LemonButton>
-        </>
-    )
-}

frontend/src/lib/components/Support/SupportModal.tsx

@@ -1,3 +1,4 @@
+import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonModal } from 'lib/lemon-ui/LemonModal/LemonModal'
 import { useEffect } from 'react'
@@ -6,7 +7,7 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 
-import { SupportForm, SupportFormButtons } from './SupportForm'
+import { SupportForm } from './SupportForm'
 import { supportLogic } from './supportLogic'
 
 function SupportModal({ onAfterClose }: { onAfterClose: () => void }): JSX.Element | null {
@@ -32,7 +33,12 @@ function SupportModal({ onAfterClose }: { onAfterClose: () => void }): JSX.Eleme
             title={title}
             footer={
                 <div className="flex items-center gap-2">
-                    <SupportFormButtons onClose={() => closeSupportForm()} />
+                    <LemonButton form="support-modal-form" type="secondary" onClick={closeSupportForm}>
+                        Cancel
+                    </LemonButton>
+                    <LemonButton form="support-modal-form" htmlType="submit" type="primary" data-attr="submit">
+                        Submit
+                    </LemonButton>
                 </div>
             }
             hasUnsavedInput={!!sendSupportRequest.message}