LF-4382 Add story for formatted label

packages/webapp/src/stories/Tab/styles.module.scss

@@ -0,0 +1,55 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../assets/mixin';
+
+.underlineContainerDesktop {
+  padding: 0 16px;
+}
+
+.taskLabel {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.taskLabelIcon {
+  path {
+    stroke: currentColor;
+  }
+}
+
+.number {
+  display: flex;
+  width: 18px;
+  height: 18px;
+  padding: 2px 4px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  font-size: 12px;
+
+  color: var(--Colors-Neutral-Neutral-300);
+  font-weight: 400;
+  background: var(--Colors-Neutral-Neutral-50);
+  box-shadow: -0.5px -0.5px 0px 0px #d0d4db;
+
+  &.selected {
+    color: #0669e1;
+    font-weight: 600;
+    background: #fafcfb;
+    box-shadow: 0.5px 0.5px 0px 0px #8eb3e1;
+  }
+}