Tab delete confirmation

src/App.scss

@@ -60,7 +60,7 @@ button {
     // top: 50%; right: 125%;       <-- tooltip is to the left
     // top: 130%; right: 50%;       <-- tooltip is to the bottom
     // bottom: 150%; left: 25%;     <-- tooltip is to the top
-    padding: 5px;
+    padding: 3px 8px;
     border-radius: 12px;
     background-color: #363B4E;
     visibility: hidden;
@@ -74,7 +74,7 @@ button {
     font-size: 11px;
     font-style: normal;
     font-weight: 400;
-    line-height: 25px;
+    line-height: 20px;
     letter-spacing: 0.55px;
   }
 

src/components-shared/Dropdowns/ActionDropdown.scss

@@ -9,7 +9,7 @@ $y: 38px;
   border: 1px solid #f4f4f4;
   box-shadow: 0px 0px 8px -3px #9b9b9b;
   border-radius: 12px;
-  padding: 13px;
+  padding: 13px 19px;
 
   z-index: 800;
 

src/components/Card/index.jsx

@@ -28,9 +28,9 @@ export const Card = ({
   // STORE SELECTORS
   const activeCardId = useSelector(state => state.sessionManager.activeCardId);
   const activeViewId = useSelector(state => state.campaignData.present.activeViewId);
-  const activeViewScale = useSelector(state => activeViewId ? state.campaignData.present.views[activeViewId].scale : null);
-  const cardPos = useSelector(state => state.campaignData.present.cards[cardId].views[activeViewId].pos);
-  const cardSize = useSelector(state => state.campaignData.present.cards[cardId].views[activeViewId].size);
+  const activeViewScale = useSelector(state => activeViewId ? state.campaignData.present.views[activeViewId]?.scale : null);
+  const cardPos = useSelector(state => state.campaignData.present.cards[cardId].views[activeViewId]?.pos);
+  const cardSize = useSelector(state => state.campaignData.present.cards[cardId].views[activeViewId]?.size);
   const cardColor = useSelector(state => state.campaignData.present.cards[cardId].color);
   const cardTitle = useSelector(state => state.campaignData.present.cards[cardId].title);
   const cardText = useSelector(state => state.campaignData.present.cards[cardId].content.text);

src/components/Popup/index.jsx

@@ -5,6 +5,7 @@ import * as actions from '../../store/actionIndex';
 import { PopupKeys } from './PopupKey';
 
 import * as Card from '../Card/popups/DeleteConfirmation';
+import * as Tab from '../TabBar/popups/DeleteConfirmation';
 import * as Project from '../HeaderMenu/popups/DeleteConfirmation';
 import SignUp from '../HeaderMenu/popups/SignUp';
 
@@ -32,8 +33,7 @@ export const Popup = () => {
       case PopupKeys.CONFIRM_CARD_DELETE:
         return <Card.DeleteConfirmation {...popup} />;
       case PopupKeys.CONFIRM_TAB_DELETE:
-        // TODO
-        return null;
+        return <Tab.DeleteConfirmation {...popup} />;
       case PopupKeys.CONFIRM_PROJECT_DELETE:
         return <Project.DeleteConfirmation {...popup} />;
       case PopupKeys.SIGN_UP:

src/components/TabBar/Tab.jsx

@@ -49,7 +49,10 @@ const Tab = ({
       size={{ width: TAB_WIDTH, height: 32 }}
       style={{ zIndex: isDragging ? 100 : 0 }}
     >
-      <div className={'tab' + (isActiveTab ? ' active' : '') + (isDragging ? ' dragging' : '')}>
+      <div
+        className={'tab' + (isActiveTab ? ' active' : '') + (isDragging ? ' dragging' : '')}
+        key={id}
+      >
         <div className='input-div'>
           <input
             className={inputClassName + (isActiveTab ? ' active' : '')}

src/components/TabBar/TabControls.jsx

@@ -22,29 +22,16 @@ const TabControls = ({
     switchTab,
   } = useTabControlsHooks({ scrollTo });
 
-  let tabList = tabs.map(tab => {
-    if (tab !== activeTab) {
-      const name = tabData[tab]?.title || 'Unnamed Tab';
-      return (
-        <li key={tab}>
-          <div onClick={() => switchTab(tab)} title={name}>
-            <span>{name}</span>
-          </div>
-        </li>
-      );
-    }
-  });
-  if (activeTab) {
-    const name = tabData[activeTab]?.title || 'Unnamed Tab';
-    tabList = [
-      ...tabList,
-      <li key={activeTab}>
-        <div className='active' title={name}>
+  let tabList = [...tabs].reverse().map(tab => {
+    const name = tabData[tab]?.title || 'Unnamed Tab';
+    return (
+      <li key={tab}>
+        <div onClick={() => switchTab(tab)} title={name}>
           <span>{name}</span>
         </div>
-      </li>,
-    ];
-  }
+      </li>
+    );
+  });
 
   return (
     <div className='tab-controls'>

src/components/TabBar/hooks.js

@@ -5,16 +5,19 @@ import useOutsideClick from '../../utils/useOutsideClick';
 import * as actions from '../../store/actionIndex';
 
 import RedTrashIcon from '../../assets/icons/red-trash.png';
+import { PopupKeys } from '../Popup/PopupKey';
 
 // TAB_WIDTH handles both the styling and drag movement for tabs.
 export const TAB_WIDTH = 200;
+export const SCROLL_RATIO = 1.75;
 
 export const useTabBarHooks = () => {
   const tabs = useSelector(state => state.campaignData.present.viewOrder || []);
   const [ position, setPosition ] = useState(0);
   const [ lockScroll, setLockScroll ] = useState(false);
   const containerRef = useRef();
   const totalTabWidth = tabs.length * (TAB_WIDTH + 1);
+  const rightBoundary = 3*(TAB_WIDTH + 1) - totalTabWidth;
   const containerWidth = () => containerRef.current.getBoundingClientRect().width;
 
   const checkLock = () => {
@@ -43,19 +46,21 @@ export const useTabBarHooks = () => {
 
   const scrollLeft = () => {
     if (!lockScroll) {
-      const newPosition = position + TAB_WIDTH*0.9;
+      const newPosition = position + (TAB_WIDTH + 1)*SCROLL_RATIO;
       if (newPosition < 0) {
-        setPosition(position+TAB_WIDTH * 0.9);
+        setPosition(position + (TAB_WIDTH + 1)*SCROLL_RATIO);
       } else {
         setPosition(0);
       }
     }
   };
   const scrollRight = () => {
     if (!lockScroll) {
-      const newPosition = position - TAB_WIDTH*0.9;
-      if (newPosition > (TAB_WIDTH - totalTabWidth)) {
-        setPosition(position-TAB_WIDTH * 0.9);
+      const newPosition = position - (TAB_WIDTH + 1)*SCROLL_RATIO;
+      if (newPosition > rightBoundary) {
+        setPosition(position - (TAB_WIDTH + 1)*SCROLL_RATIO);
+      } else {
+        setPosition(rightBoundary);
       }
     }
   };
@@ -90,6 +95,8 @@ export const useTabBarHooks = () => {
         }
       }
     },
+    isInactiveLeft: lockScroll || position === 0,
+    isInactiveRight: lockScroll || position === rightBoundary,
   };
 };
 
@@ -196,7 +203,10 @@ export const useTabHooks = ({
       title: 'Delete',
       type: 'danger',
       // icon: RedTrashIcon,
-      callback: () => dispatch(actions.destroyView(id)),
+      callback: () => dispatch(actions.setPopup({
+        type: PopupKeys.CONFIRM_TAB_DELETE,
+        id,
+      })),
     },
     {},
     {

src/components/TabBar/index.jsx

@@ -17,6 +17,8 @@ const TabBar = () => {
     scrollRight,
     scrollTo,
     onWheel,
+    isInactiveLeft,
+    isInactiveRight,
   } = useTabBarHooks();
 
   const tabList = tabs.map(tab => <Tab id={tab} />);
@@ -38,13 +40,13 @@ const TabBar = () => {
       </div>
       <div className='tab-scroll'>
         <button
-          className='scroll'
+          className={'scroll' + (isInactiveLeft ? ' inactive' : '')}
           onClick={scrollLeft}
         >
           <img src={ScrollLeftIcon} />
         </button>
         <button
-          className='scroll'
+          className={'scroll' + (isInactiveRight ? ' inactive' : '')}
           onClick={scrollRight}
         >
           <img src={ScrollRightIcon} />

src/components/TabBar/index.scss

@@ -1,4 +1,4 @@
-$menu-height: 42px;
+$menu-height: 43px;
 
 // follow viewscreen example. use position absolute
 
@@ -8,10 +8,9 @@ $menu-height: 42px;
   height: $menu-height;
   z-index: 90;
   background-color: #363B4E;
-  border-top: 1px solid #F4F4F4;
 
   display: grid;
-  grid-template-columns: 76px auto 80px;
+  grid-template-columns: 70px auto 94px;
   gap: 3px;
 }
 
@@ -52,7 +51,7 @@ $menu-height: 42px;
     font-family: Roboto;
     font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 600;
     line-height: 25px;
     letter-spacing: 0.6px;
 
@@ -73,7 +72,7 @@ $menu-height: 42px;
             overflow: hidden;
             text-overflow: ellipsis;
           }
-          &:hover { background-color: #C1E9FF; }
+          &:hover { background-color: #DBE2EB; }
         }
       }
     }
@@ -119,7 +118,7 @@ $menu-height: 42px;
   .tab {
     position: relative;
     padding: 7px 10px;
-    border-radius: 0px 0px 12px 12px;
+    border-radius: 0px 0px 16px 16px;
     background: #667092;
     display: grid;
     grid-template-columns: auto 24px;
@@ -181,11 +180,11 @@ $menu-height: 42px;
     }
   }
   .active { background: #FFF; }
-  .dragging { box-shadow: 0 3px #5BC5FF; }
+  // .dragging { box-shadow: 0 3px #5BC5FF; }
 }
 
 .tab-scroll {
-  padding: 4px;
+  padding: 5px 12px 8px 12px;
   background-color: #363B4E;
   z-index: 10;
   display: flex;

src/components/TabBar/popups/DeleteConfirmation.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import './DeleteConfirmation.scss';
+import * as actions from '../../../store/actionIndex';
+
+export const DeleteConfirmation = ({
+  id,
+}) => {
+  const dispatch = useDispatch();
+
+  const cancelClick = () => dispatch(actions.resetPopup());
+  const confirmClick = () => {
+    dispatch(actions.destroyView(id));
+    dispatch(actions.resetPopup());
+  };
+
+  return (
+    <div className='card-delete-confirmation'>
+      <div className='x-btn' onClick={cancelClick} />
+      <div className='row'>
+        <h1 className='heading'>Game Master!</h1>
+      </div>
+      <div className='row'>
+        <p className='message'>Are you sure you want to delete this tab?</p>
+      </div>
+      <div className='row'>
+        <button className='cancel btn' onClick={cancelClick}>
+          Cancel
+        </button>
+        <button className='confirm btn' onClick={confirmClick}>
+          OK
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmation;

src/components/TabBar/popups/DeleteConfirmation.scss

@@ -0,0 +1,90 @@
+
+.card-delete-confirmation {
+  margin: auto;
+  padding: 36px 8px;
+
+  background: white;
+  border: solid 1px #F4F4F4;
+  box-shadow: 0 5px 40px -3px #D4D4D4;
+  border-radius: 12px;
+
+  .row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin: 8px 36px;
+  }
+
+  .heading {
+    color: #000;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    letter-spacing: 0.27px;
+  }
+
+  .message {
+    width: auto;
+    white-space: nowrap;
+
+    color: #363B4E;
+    text-align: center;
+    font-kerning: none;
+    font-family: Roboto;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px; /* 138.462% */
+    letter-spacing: 0.65px;
+  }
+
+  .x-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 12px 12px 0 0;
+    width: 19px;
+    height: 18px;
+    background-color: #FFFFFF;
+    border-color: #DBE2EB;
+    background-image: url('../../../assets/icons/close-window.png');
+    &:hover { background-image: url('../../../assets/icons/close-window-hover.png'); }
+  }
+
+  .btn {
+    width: 80px;
+    height: 29px;
+    margin: 10px;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 6px;
+
+    color: #000;
+    text-align: center;
+    font-kerning: none;
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px; /* 233.333% */
+    letter-spacing: 0.6px;
+  }
+
+  .cancel {
+    background-color: #FFFFFF;
+    border-color: #DBE2EB;
+    &:hover { background-color: #DBE2EB; }
+  }
+
+  .confirm {
+    background-color: #E8F5FE;
+    border-color: #E8F5FE;
+    &:hover {
+      background-color: #C1E9FF;
+      border-color: #C1E9FF;
+    }
+  }
+}