change order of buttons at sidebar

src/components/Sidebar/index.tsx

@@ -200,9 +200,15 @@ export const Sidebar: React.FC = () => {
             {settings.expand ? <CgArrowsMergeAltH /> : <CgArrowsShrinkH />}
           </StyledElement>
         </Tooltip>
-        <Tooltip title="Clear JSON">
-          <StyledElement onClick={() => setClearVisible(true)}>
-            <AiOutlineDelete />
+        <Tooltip
+          title={`${
+            settings.performance ? "Disable" : "Enable"
+          } Performance Mode (Beta)`}
+        >
+          <StyledElement onClick={togglePerformance} beta>
+            <CgPerformance
+              color={settings.performance ? "#0073FF" : undefined}
+            />
           </StyledElement>
         </Tooltip>
         <Tooltip title="Save JSON">
@@ -210,22 +216,16 @@ export const Sidebar: React.FC = () => {
             <AiOutlineSave />
           </StyledElement>
         </Tooltip>
+        <Tooltip title="Clear JSON">
+          <StyledElement onClick={() => setClearVisible(true)}>
+            <AiOutlineDelete />
+          </StyledElement>
+        </Tooltip>
         <Tooltip title="Share">
           <StyledElement onClick={() => setShareVisible(true)}>
             <AiOutlineLink />
           </StyledElement>
         </Tooltip>
-        <Tooltip
-          title={`${
-            settings.performance ? "Disable" : "Enable"
-          } Performance Mode (Beta)`}
-        >
-          <StyledElement onClick={togglePerformance} beta>
-            <CgPerformance
-              color={settings.performance ? "#0073FF" : undefined}
-            />
-          </StyledElement>
-        </Tooltip>
       </StyledTopWrapper>
       <StyledBottomWrapper>
         <StyledElement>