Update all development Yarn dependencies (2022-10-03)

package.json

@@ -151,14 +151,14 @@
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.11.0",
-    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint": "^14.12.1",
+    "stylelint-config-idiomatic-order": "^9.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^28.0.0",
     "stylelint-prettier": "^2.0.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.1",
+    "webpack-dev-server": "^4.11.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "jest": {

res/css/photon/button.css

@@ -6,14 +6,14 @@
 .photon-button {
   padding: 0 8px;
   border: none;
+  border-radius: 2px;
   margin: 0;
 
   /* reset default styles */
   background: none;
 
   /* photon styles */
   background-color: var(--grey-90-a10);
-  border-radius: 2px;
   color: var(--grey-90);
   font: inherit;
 }

res/css/photon/checkbox.css

@@ -6,9 +6,9 @@
   position: relative;
   padding: 0;
   border: 1px solid var(--grey-90-a30);
+  border-radius: 2px;
   appearance: none;
   background-color: var(--grey-90-a10);
-  border-radius: 2px;
 }
 
 /* Remove the border, as it compets with box-shadow styles applied with focus.css */

res/css/photon/message-bar.css

@@ -13,13 +13,13 @@
    * for the icon) + 16px (icon width) + 4px (right padding for the icon) + 4px
    * (space between icon and text) */
   padding: 4px 4px 4px 32px;
+  border-radius: 4px;
 
   /* Note: 8px is: 4px (left padding for the message bar) + 4px (left padding
    * for the icon). And same for the top positioning, because we want the icon
    * to stick at the top when the text is multiline */
   background: url(../../img/svg/info-icon.svg) no-repeat 8px 8px / 16px 16px
     var(--grey-20);
-  border-radius: 4px;
   color: var(--grey-90);
   font-size: 13px;
   font-weight: 400;

res/css/photon/radio-button.css

@@ -4,10 +4,10 @@
 
 .photon-radio {
   border: 1px solid var(--grey-90-a30);
+  border-radius: 8px;
   appearance: none;
   background: none;
   background-color: var(--grey-90-a10);
-  border-radius: 8px;
 }
 
 /* Use this class with the photon-radio for the canonical photon styling. */

src/components/app/BottomBox.css

@@ -62,9 +62,9 @@
   flex-flow: row;
   align-items: center;
   padding: 15px;
+  border-radius: 10px;
   margin: auto;
   background-color: rgb(240 240 240 / 0.8);
-  border-radius: 10px;
   gap: 15px;
   word-break: break-word;
 }

src/components/app/CompareHome.css

@@ -5,11 +5,11 @@
   /* Box */
   padding: 8em;
   border: 1px solid #ccc;
+  border-radius: 3px;
   margin: auto;
 
   /* Other */
   background: #fff;
-  border-radius: 3px;
   box-shadow: 0 5px 25px #0b1f50;
   font-size: 130%;
 }

src/components/app/ErrorBoundary.css

@@ -25,9 +25,9 @@
 
 .appErrorBoundaryDetails {
   padding: 25px;
+  border-radius: 4px;
   margin: 12px 0;
   background: #fff;
-  border-radius: 4px;
   box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
   color: var(--grey-70);
   font-family: monospace;

src/components/app/Home.css

@@ -15,9 +15,9 @@
 .homeSpecialMessage {
   padding: 8px 16px;
   border: 1px solid #000;
+  border-radius: 3px;
   margin: 17px 0;
   background-color: #798fc8;
-  border-radius: 3px;
   color: #fff;
 }
 
@@ -29,8 +29,8 @@
   box-sizing: border-box;
   padding: 4em 8em;
   border: 1px solid #ccc;
-  background-color: #fff;
   border-radius: 3px;
+  background-color: #fff;
   box-shadow: 0 5px 25px #0b1f50;
   font-size: 130%;
 }
@@ -39,9 +39,9 @@
   display: inline-block;
   padding: 0 0.5em;
   border: 1px solid #ccc;
+  border-radius: 0.2em;
   margin: 0 0.2em;
   background-color: #f6f6f6;
-  border-radius: 0.2em;
   box-shadow: 0.1em 0.1em 0 #bbb;
 }
 

src/components/app/KeyboardShortcut.css

@@ -26,10 +26,10 @@
 
   /* appKeyboardShortcuts margin top + bottom = 40px */
   max-height: calc(100% - 40px);
+  border-radius: 5px;
   margin: 0 auto;
   animation: arrowPanelAppear 0.2s cubic-bezier(0.07, 0.95, 0, 1);
   background: #fff;
-  border-radius: 5px;
   filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.4))
     drop-shadow(0 4px 5px rgb(0 0 0 / 0.4));
 }
@@ -54,8 +54,8 @@
   display: inline-flex;
   align-items: center;
   padding: 0 5px;
-  background: rgb(222 222 227 / 0.79);
   border-radius: 3px;
+  background: rgb(222 222 227 / 0.79);
   box-shadow: 1px 1px rgb(0 0 0 / 0.27);
   color: #000;
   margin-inline-start: 6px;
@@ -91,12 +91,12 @@
 .appKeyboardShortcutsHeaderClose {
   padding: 6px 6px 6px 30px;
   border: 0;
+  border-radius: 3px;
 
   /* Allow for the photon focus ring to fit in the space by using a 4px margin. */
   margin: 4px;
   background: url(../../../res/img/svg/searchfield-cancel.svg) 10px center
     no-repeat;
-  border-radius: 3px;
   cursor: pointer;
   font-size: inherit;
 }

src/components/app/MenuButtons/Publish.css

@@ -141,14 +141,15 @@
 .menuButtonsPublishUploadBar {
   overflow: hidden;
   height: 5px;
-  background-color: var(--grey-40);
   border-radius: 2px;
+  background-color: var(--grey-40);
 }
 
 .menuButtonsPublishUploadBarInner {
   position: absolute;
   top: 0;
   height: 3px;
+  border-radius: 0 2px 2px 0;
   animation: animate-stripes 1s linear infinite;
   background-color: var(--blue-50);
   background-image: linear-gradient(
@@ -163,7 +164,6 @@
     transparent 80%
   );
   background-size: 21px 20px, 100% 100%, 100% 100%;
-  border-radius: 0 2px 2px 0;
 }
 
 @keyframes animate-stripes {

src/components/app/ProfileName.css

@@ -6,8 +6,8 @@
   height: 17px;
   padding: 0 6px;
   border: none;
-  margin: 4px;
   border-radius: 1px;
+  margin: 4px;
   color: var(--grey-60);
   font: inherit;
   font-weight: 700;

src/components/app/ProfileRootMessage.css

@@ -20,8 +20,8 @@
   box-sizing: border-box;
   padding: 3em;
   border: 1px solid #ccc;
-  background-color: #fff;
   border-radius: 3px;
+  background-color: #fff;
   box-shadow: 0 5px 25px #0b1f50;
   font-size: 130%;
 }
@@ -52,10 +52,10 @@
 .loading-div {
   position: absolute;
   height: 8px;
+  border-radius: 2px;
   animation-duration: 4000ms;
   animation-iteration-count: infinite;
   animation-name: loadingdiv;
-  border-radius: 2px;
 }
 
 .loading-row-1 {

src/components/app/ProfileViewer.css

@@ -76,12 +76,12 @@
   flex: none;
   padding: 0;
   border: 1px solid var(--green-60);
+  border-radius: 3px;
   margin: 3px 0 3px 3px;
 
   /* Other */
   background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
     center no-repeat;
-  border-radius: 3px;
   color: #000;
 }
 

src/components/app/SymbolicationStatusOverlay.css

@@ -12,8 +12,8 @@
   padding-top: 8px;
   padding-right: 10px;
   padding-left: 10px;
-  background: var(--grey-20);
   border-radius: 0 0 5px 5px;
+  background: var(--grey-20);
   box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.1);
   line-height: 20px;
   text-align: center;

src/components/app/UploadedRecordingsHome.css

@@ -9,11 +9,11 @@
   box-sizing: border-box;
   padding: 3em 1em;
   border: 1px solid #ccc;
+  border-radius: 3px;
   margin: auto;
 
   /* Other */
   background: #fff;
-  border-radius: 3px;
   box-shadow: 0 5px 25px #0b1f50;
   font-size: 13px;
   line-height: 1.5;

src/components/app/ZipFileViewer.css

@@ -29,10 +29,10 @@
   box-sizing: border-box;
   flex-direction: column;
   border: 1px solid #ccc;
+  border-radius: 3px;
 
   /* Other */
   background-color: #fff;
-  border-radius: 3px;
   box-shadow: 0 5px 25px #0b1f50;
 }
 
@@ -72,8 +72,8 @@
    */
   max-width: 70%;
   padding: 0 5px;
-  background-color: var(--grey-30);
   border-radius: 3px;
+  background-color: var(--grey-30);
   font-family: monospace;
   text-overflow: ellipsis;
 }

src/components/network-chart/index.css

@@ -54,11 +54,11 @@
   display: inline-block;
   overflow: hidden; /* This clips this element's children using its border-radius */
   height: 14px;
+  border-radius: 2px;
   margin: 1px 0; /* Because the line's height is 16px, this margin vertically centers the bar */
 
   /* styling properties */
   background-color: var(--grey-20);
-  border-radius: 2px;
   box-shadow: 0 0 0 1px inset var(--marker-color);
   opacity: 0.7;
 }

src/components/shared/ButtonWithPanel/ArrowPanel.css

@@ -19,8 +19,8 @@
   top: var(--internal-offset-from-top);
   right: calc(var(--internal-offset-from-right) * -1);
   min-width: var(--internal-width);
-  background: hsl(0deg 0% 97% / 0.95);
   border-radius: 5px;
+  background: hsl(0deg 0% 97% / 0.95);
   color: black;
   filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.4))
     drop-shadow(0 4px 5px rgb(0 0 0 / 0.4));

src/components/shared/CallNodeContextMenu.css

@@ -33,11 +33,11 @@
 
 .callNodeContextMenuShortcut {
   padding: 0 5px;
+  border-radius: 3px;
 
   /* This color is based off of photon grey, but adjusted to have a nice visual look
      when hovering. */
   background: #dedee3c9;
-  border-radius: 3px;
   box-shadow: 1px 1px #0004;
 
   /* Override the hover color. */

src/components/shared/ContextMenu.css

@@ -8,9 +8,9 @@
   min-width: 160px;
   max-width: 600px;
   padding: 5px 0;
+  border-radius: 3px;
   margin: 2px 0 0;
   background-color: #fff;
-  border-radius: 3px;
   box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 10px 12px rgb(0 0 0 / 0.3);
   color: #000;
   font-size: 12px;

src/components/shared/TreeView.css

@@ -165,13 +165,13 @@
 
 .treeViewHighlighting {
   padding: 1px 0;
+  border-radius: 2px;
 
   /* This negative margin enlarges the background to the top, so that it fully
   * covers the underlying background. There's an underlying background when the
   * line is selected. */
   margin: -1px 0;
   background: #cbe8fe;
-  border-radius: 2px;
   box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.05), 0 1px 1px rgb(0 0 0 / 0.3);
   color: #000;
 }

src/components/shared/chart/Viewport.css

@@ -40,8 +40,8 @@
   left: 0;
   overflow: hidden;
   padding: 3px 10px;
-  background: rgb(0 0 0 / 0.07);
   border-radius: 0 5px 0 0;
+  background: rgb(0 0 0 / 0.07);
   box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.1);
   line-height: 20px;
   opacity: 1;
@@ -63,9 +63,9 @@
   display: inline-block;
   padding: 0 0.5em;
   border: 1px solid #ccc;
+  border-radius: 0.2em;
   margin: 0 0.2em;
   background-color: #f6f6f6;
-  border-radius: 0.2em;
   box-shadow: -0.1em 0.1em 0 #bbb;
   color: #000;
 }