Playground buttons (#3208)

packages/apps/src/SideBar/index.tsx

@@ -6,7 +6,7 @@ import { Routes } from '@polkadot/apps-routing/types';
 
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { Responsive } from 'semantic-ui-react';
+import Responsive from 'semantic-ui-react/dist/commonjs/addons/Responsive';
 import createRoutes from '@polkadot/apps-routing';
 import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
 

packages/page-js/src/ActionButtons.tsx

@@ -3,8 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback, useState } from 'react';
-import { Popup } from 'semantic-ui-react';
-import { Button, Input } from '@polkadot/react-components';
+import { Button, Input, Popup } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -51,51 +50,47 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
   );
 
   return (
-    <div className={`${className} action-button`}>
-      {isCustomExample && (
-        <Popup
-          content={t<string>('Delete this custom example')}
-          on='hover'
-          trigger={
-            <Button
-              icon='trash'
-              isNegative
-              onClick={removeSnippet}
+    <Button.Group className={`${className} action-button`}>
+      {isCustomExample
+        ? (
+          <Button
+            icon='trash'
+            isNegative
+            onClick={removeSnippet}
+          />
+        )
+        : (
+          <Popup
+            className='popup-local'
+            isOpen={isOpen}
+            on='click'
+            onClose={_onPopupClose}
+            trigger={
+              <Button
+                icon='save'
+                onClick={_onPopupOpen}
+              />
+            }
+          >
+            <Input
+              autoFocus
+              maxLength={50}
+              min={1}
+              onChange={_onChangeName}
+              onEnter={_saveSnippet}
+              placeholder={t<string>('Name your example')}
+              value={snippetName}
+              withLabel={false}
             />
-          }
-        />
-      )}
-      {!(isCustomExample) && (
-        <Popup
-          className='popup-local'
-          on='click'
-          onClose={_onPopupClose}
-          open={isOpen}
-          trigger={
             <Button
               icon='save'
-              onClick={_onPopupOpen}
+              isDisabled={!snippetName.length}
+              label={t<string>('Save snippet to local storage')}
+              onClick={_saveSnippet}
             />
-          }
-        >
-          <Input
-            autoFocus
-            maxLength={50}
-            min={1}
-            onChange={_onChangeName}
-            onEnter={_saveSnippet}
-            placeholder={t<string>('Name your example')}
-            value={snippetName}
-            withLabel={false}
-          />
-          <Button
-            icon='save'
-            isDisabled={!snippetName.length}
-            label={t<string>('Save snippet to local storage')}
-            onClick={_saveSnippet}
-          />
-        </Popup>
-      )}
+          </Popup>
+        )
+      }
       {isRunning
         ? (
           <Button
@@ -111,7 +106,7 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
           />
         )
       }
-    </div>
+    </Button.Group>
   );
 }
 

packages/page-js/src/Playground.tsx

@@ -299,7 +299,7 @@ export default React.memo(styled(Playground)`
 
     .action-button {
       position: absolute;
-      right: 0.25rem;
+      right: 0.5rem;
       top: 0.5rem;
       z-index: 100;
     }