From 8091ac6c088f4aaf8bdc91faa0756c848cf394a9 Mon Sep 17 00:00:00 2001
From: Harshil Parmar <harshilparmar80@gmail.com>
Date: Sun, 27 Dec 2020 00:53:51 +0530
Subject: [PATCH] style: media query for hiding shortcuts for mobile view
 (#2667)

Co-authored-by: Lipis <lipiridis@gmail.com>
---
 src/components/ContextMenu.scss | 24 +++++++++++++++++++-----
 src/components/ContextMenu.tsx  |  4 ++--
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index f2acaaad..089c9013 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -1,4 +1,4 @@
-@import "open-color/open-color.scss";
+@import "../css/_variables";
 
 .excalidraw {
   .context-menu {
@@ -42,16 +42,16 @@
     }
 
     &.dangerous {
-      div:nth-child(1) {
+      .context-menu-option__label {
         color: $oc-red-7;
       }
     }
 
-    div:nth-child(1) {
+    .context-menu-option__label {
       justify-self: start;
       margin-inline-end: 20px;
     }
-    div:nth-child(2) {
+    .context-menu-option__shortcut {
       justify-self: end;
       opacity: 0.6;
       font-size: 0.7rem;
@@ -63,7 +63,7 @@
     background-color: var(--select-highlight-color);
 
     &.dangerous {
-      div:nth-child(1) {
+      .context-menu-option__label {
         color: var(--popup-background-color);
       }
       background-color: $oc-red-6;
@@ -73,4 +73,18 @@
   .context-menu-option:focus {
     z-index: 1;
   }
+
+  @media #{$media-query} {
+    .context-menu-option {
+      display: block;
+
+      .context-menu-option__label {
+        margin-inline-end: 0;
+      }
+
+      .context-menu-option__shortcut {
+        display: none;
+      }
+    }
+  }
 }
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 39067382..27d14d88 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -51,8 +51,8 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
                 ${checked ? "checkmark" : ""}`}
                 onClick={action}
               >
-                <div>{label}</div>
-                <div>
+                <div className="context-menu-option__label">{label}</div>
+                <div className="context-menu-option__shortcut">
                   {shortcutName
                     ? getShortcutFromShortcutName(shortcutName)
                     : ""}