@visns-studio/visns-components 5.1.6 → 5.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/Field.jsx +15 -20
  3. package/src/components/crm/Form.jsx +1 -1
  4. package/src/components/crm/generic/GenericDynamic.jsx +125 -121
  5. package/src/components/crm/generic/GenericFormBuilder.jsx +62 -67
  6. package/src/components/crm/generic/styles/GenericDynamic.module.scss +1 -0
  7. package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +10 -6
  8. package/src/components/crm/styles/Field.module.scss +65 -42
package/package.json CHANGED
@@ -77,7 +77,7 @@
77
77
  "react-dom": "^17.0.0 || ^18.0.0"
78
78
  },
79
79
  "name": "@visns-studio/visns-components",
80
- "version": "5.1.6",
80
+ "version": "5.1.8",
81
81
  "description": "Various packages to assist in the development of our Custom Applications.",
82
82
  "main": "src/index.js",
83
83
  "files": [
package/src/components/crm/Field.jsx CHANGED
@@ -144,6 +144,8 @@ function Field({
144
144
  break;
145
145
  }
146
146
 
147
+ console.info(settings);
148
+
147
149
  switch (settings.size) {
148
150
  case 'full':
149
151
  setFormItemClass(`${styles.formItem} ${styles.fwItem}`);
@@ -157,6 +159,10 @@ function Field({
157
159
  }
158
160
  }, [settings, counter]);
159
161
 
162
+ useEffect(() => {
163
+ console.info(formItemClass);
164
+ }, [formItemClass]);
165
+
160
166
  const fetchChildDropdownData = (s, v) => {
161
167
  let filter = {};
162
168
 
@@ -664,18 +670,13 @@ function Field({
664
670
  case 'dynamicdata':
665
671
  return (
666
672
  <div
667
- className="fi__div"
673
+ className={styles.fi__div}
668
674
  style={
669
675
  settings.height
670
676
  ? {
671
677
  height: settings.height,
672
- paddingTop: '10px',
673
- marginLeft: '13px',
674
- }
675
- : {
676
- paddingTop: '10px',
677
- marginLeft: '13px',
678
678
  }
679
+ : {}
679
680
  }
680
681
  >
681
682
  {inputValue && inputValue !== 'null' ? inputValue : ''}
@@ -940,7 +941,7 @@ function Field({
940
941
  );
941
942
  case 'line-break':
942
943
  return (
943
- <div className="formbreak">
944
+ <div className={styles.formbreak}>
944
945
  <span>
945
946
  {settings.label}{' '}
946
947
  {settings.required === true ? '*' : ''}
@@ -1049,18 +1050,13 @@ function Field({
1049
1050
  case 'plaintext':
1050
1051
  return (
1051
1052
  <div
1052
- className="fi__div"
1053
+ className={styles.fi__div}
1053
1054
  style={
1054
1055
  settings.height
1055
1056
  ? {
1056
1057
  height: settings.height,
1057
- paddingTop: '10px',
1058
- marginLeft: '13px',
1059
- }
1060
- : {
1061
- paddingTop: '10px',
1062
- marginLeft: '13px',
1063
1058
  }
1059
+ : {}
1064
1060
  }
1065
1061
  >
1066
1062
  {inputValue && inputValue !== 'null' ? inputValue : ''}
@@ -1069,7 +1065,6 @@ function Field({
1069
1065
  case 'plaintextheading':
1070
1066
  return (
1071
1067
  <div
1072
- className="fi__div"
1073
1068
  style={
1074
1069
  settings.height
1075
1070
  ? {
@@ -1086,7 +1081,7 @@ function Field({
1086
1081
  case 'plainrelation':
1087
1082
  return (
1088
1083
  <div
1089
- className="fi__div"
1084
+ className={styles.fi__div}
1090
1085
  style={
1091
1086
  settings.height
1092
1087
  ? {
@@ -1101,7 +1096,7 @@ function Field({
1101
1096
  case 'plainrelationarray':
1102
1097
  return (
1103
1098
  <div
1104
- className="fi__div"
1099
+ className={styles.fi__div}
1105
1100
  style={
1106
1101
  settings.height
1107
1102
  ? {
@@ -1116,7 +1111,7 @@ function Field({
1116
1111
  case 'plaindate':
1117
1112
  return (
1118
1113
  <div
1119
- className="fi__div"
1114
+ className={styles.fi__div}
1120
1115
  style={
1121
1116
  settings.height
1122
1117
  ? {
@@ -1133,7 +1128,7 @@ function Field({
1133
1128
  case 'plaindatetime':
1134
1129
  return (
1135
1130
  <div
1136
- className="fi__div"
1131
+ className={styles.fi__div}
1137
1132
  style={
1138
1133
  settings.height ? { height: settings.height } : {}
1139
1134
  }
package/src/components/crm/Form.jsx CHANGED
@@ -1206,7 +1206,7 @@ function Form({
1206
1206
  if (type && type === 'inline') {
1207
1207
  return (
1208
1208
  <div className={styles.formcontainer}>
1209
- <form className={styles.modalForm}>
1209
+ <form>
1210
1210
  {formSettings.fields.map((item, index) => {
1211
1211
  if (item.hasOwnProperty('hide') && item.hide === true) {
1212
1212
  return null;
package/src/components/crm/generic/GenericDynamic.jsx CHANGED
@@ -682,125 +682,6 @@ const GenericDynamic = ({
682
682
  return (
683
683
  <>
684
684
  <div className={styles.formSplit}>
685
- {multiple && shouldDisplayFormList(data, type) && (
686
- <>
687
- <div className={styles.gridtxt__header}>
688
- <span>Form List</span>
689
- </div>
690
- <table className={styles.contentTable}>
691
- <thead>
692
- <tr>
693
- <th>ID</th>
694
- <th>Form</th>
695
- <th>Created By</th>
696
- <th>Created At</th>
697
- <th>Updated By</th>
698
- <th>Updated At</th>
699
- <th></th>
700
- </tr>
701
- </thead>
702
- <tbody>
703
- {typeof data[type]?.map === 'function' &&
704
- data[type].map((item, index) => {
705
- const idAsNumber = parseFloat(item.id);
706
- if (
707
- !isNaN(idAsNumber) &&
708
- Number.isInteger(idAsNumber)
709
- ) {
710
- return (
711
- <tr
712
- key={`form-list-${index}`}
713
- onClick={(e) => {
714
- e.preventDefault();
715
- handleSelectForm(
716
- item,
717
- index
718
- );
719
- }}
720
- >
721
- <td>{item.id}</td>
722
- <td>{item.form_label}</td>
723
- <td>{item.created_by}</td>
724
- <td>
725
- {item.created_at
726
- ? moment(
727
- item.created_at
728
- ).format(
729
- 'DD-MM-YYYY hh:mm A'
730
- )
731
- : null}
732
- </td>
733
- <td>{item.updated_by}</td>
734
- <td>
735
- {item.updated_at
736
- ? moment(
737
- item.updated_at
738
- ).format(
739
- 'DD-MM-YYYY hh:mm A'
740
- )
741
- : null}
742
- </td>
743
- <td>
744
- <div
745
- className={
746
- styles.tdActions
747
- }
748
- >
749
- <span
750
- data-tooltip-id="system-tooltip"
751
- data-tooltip-content="Download Form"
752
- className="tooltip"
753
- onClick={() =>
754
- handleDownloadForm(
755
- item,
756
- label,
757
- originalData
758
- )
759
- }
760
- >
761
- <CloudDownload
762
- strokeWidth={
763
- 2
764
- }
765
- size={18}
766
- className={
767
- styles.tdAction
768
- }
769
- />
770
- </span>
771
- <span
772
- data-tooltip-id="system-tooltip"
773
- data-tooltip-content="Delete Form"
774
- className="tooltip"
775
- onClick={() =>
776
- handleDeleteForm(
777
- item.id,
778
- index
779
- )
780
- }
781
- >
782
- <Backspace
783
- strokeWidth={
784
- 2
785
- }
786
- size={18}
787
- className={
788
- styles.tdAction
789
- }
790
- />
791
- </span>
792
- </div>
793
- </td>
794
- </tr>
795
- );
796
- }
797
- return null;
798
- })}
799
- </tbody>
800
- </table>
801
- </>
802
- )}
803
-
804
685
  {activeForm && (
805
686
  <>
806
687
  <div className={styles.gridtxt__header}>
@@ -810,7 +691,7 @@ const GenericDynamic = ({
810
691
  </span>
811
692
  </div>
812
693
  <div className={styles.formcontainer}>
813
- <div className={styles.modalForm}>
694
+ <form>
814
695
  {typeof activeForm === 'object' &&
815
696
  !Array.isArray(activeForm)
816
697
  ? Object.entries(activeForm)
@@ -916,10 +797,133 @@ const GenericDynamic = ({
916
797
  />
917
798
  )
918
799
  )}
919
- </div>
800
+ </form>
920
801
  </div>
921
802
  </>
922
803
  )}
804
+
805
+ {multiple && shouldDisplayFormList(data, type) && (
806
+ <>
807
+ <div
808
+ className={styles.gridtxt__header}
809
+ style={{ paddingTop: '20px' }}
810
+ >
811
+ <span>Form List</span>
812
+ </div>
813
+ <table className={styles.contentTable}>
814
+ <thead>
815
+ <tr>
816
+ <th>ID</th>
817
+ <th>Form</th>
818
+ <th>Created By</th>
819
+ <th>Created At</th>
820
+ <th>Updated By</th>
821
+ <th>Updated At</th>
822
+ <th></th>
823
+ </tr>
824
+ </thead>
825
+ <tbody>
826
+ {typeof data[type]?.map === 'function' &&
827
+ data[type].map((item, index) => {
828
+ const idAsNumber = parseFloat(item.id);
829
+ if (
830
+ !isNaN(idAsNumber) &&
831
+ Number.isInteger(idAsNumber)
832
+ ) {
833
+ return (
834
+ <tr
835
+ key={`form-list-${index}`}
836
+ onClick={(e) => {
837
+ e.preventDefault();
838
+ handleSelectForm(
839
+ item,
840
+ index
841
+ );
842
+ }}
843
+ >
844
+ <td>{item.id}</td>
845
+ <td>{item.form_label}</td>
846
+ <td>{item.created_by}</td>
847
+ <td>
848
+ {item.created_at
849
+ ? moment(
850
+ item.created_at
851
+ ).format(
852
+ 'DD-MM-YYYY hh:mm A'
853
+ )
854
+ : null}
855
+ </td>
856
+ <td>{item.updated_by}</td>
857
+ <td>
858
+ {item.updated_at
859
+ ? moment(
860
+ item.updated_at
861
+ ).format(
862
+ 'DD-MM-YYYY hh:mm A'
863
+ )
864
+ : null}
865
+ </td>
866
+ <td>
867
+ <div
868
+ className={
869
+ styles.tdActions
870
+ }
871
+ >
872
+ <span
873
+ data-tooltip-id="system-tooltip"
874
+ data-tooltip-content="Download Form"
875
+ className="tooltip"
876
+ onClick={() =>
877
+ handleDownloadForm(
878
+ item,
879
+ label,
880
+ originalData
881
+ )
882
+ }
883
+ >
884
+ <CloudDownload
885
+ strokeWidth={
886
+ 2
887
+ }
888
+ size={18}
889
+ className={
890
+ styles.tdAction
891
+ }
892
+ />
893
+ </span>
894
+ <span
895
+ data-tooltip-id="system-tooltip"
896
+ data-tooltip-content="Delete Form"
897
+ className="tooltip"
898
+ onClick={() =>
899
+ handleDeleteForm(
900
+ item.id,
901
+ index
902
+ )
903
+ }
904
+ >
905
+ <Backspace
906
+ strokeWidth={
907
+ 2
908
+ }
909
+ size={18}
910
+ className={
911
+ styles.tdAction
912
+ }
913
+ />
914
+ </span>
915
+ </div>
916
+ </td>
917
+ </tr>
918
+ );
919
+ }
920
+ return null;
921
+ })}
922
+ </tbody>
923
+ </table>
924
+ <div style={{ paddingBottom: '56px' }}></div>
925
+ </>
926
+ )}
923
927
  </div>
924
928
  <div className={styles.polActions}>
925
929
  {buttons &&
package/src/components/crm/generic/GenericFormBuilder.jsx CHANGED
@@ -450,12 +450,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
450
450
  );
451
451
  case 'checkbox':
452
452
  return (
453
- <label className={styles.fi__label}>
453
+ <div>
454
454
  <span className={styles.fi__spancheckbox}>
455
455
  {field.label}{' '}
456
456
  {field.required === 'yes' ? '*' : null}
457
457
  </span>
458
- {field.options.length > 0 ? (
458
+ {field.options.length > 0 && (
459
459
  <div className={styles.fi__optionscontainer}>
460
460
  {field.options.map((option, index) => (
461
461
  <div
@@ -464,20 +464,22 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
464
464
  >
465
465
  <input
466
466
  type="checkbox"
467
+ id={`${field.id}-checkbox-${index}`}
467
468
  className={
468
469
  styles.fi__customcheckbox
469
470
  }
470
471
  />
471
472
  <label
473
+ htmlFor={`${field.id}-checkbox-${index}`}
472
474
  className={styles.fi__checkboxlabel}
473
475
  >
474
476
  {option.label}
475
- </label>{' '}
477
+ </label>
476
478
  </div>
477
479
  ))}
478
480
  </div>
479
- ) : null}
480
- </label>
481
+ )}
482
+ </div>
481
483
  );
482
484
  case 'date':
483
485
  return (
@@ -1142,65 +1144,53 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1142
1144
  <div
1143
1145
  className={`${styles.formItem} ${styles.fwItem}`}
1144
1146
  >
1145
- <label className={styles.fi__label}>
1146
- <Editor
1147
- tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
1148
- licenseKey="gpl"
1149
- onEditorChange={(
1147
+ <Editor
1148
+ tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
1149
+ licenseKey="gpl"
1150
+ onEditorChange={(value, e) => {
1151
+ handleChangeFormRichEditor(
1152
+ e,
1150
1153
  value,
1151
- e
1152
- ) => {
1153
- handleChangeFormRichEditor(
1154
- e,
1155
- value,
1156
- 'description'
1157
- );
1158
- }}
1159
- onInit={(evt, editor) =>
1160
- (editorRef.current =
1161
- editor)
1162
- }
1163
- value={
1164
- dataField.description ||
1165
- ''
1166
- }
1167
- init={{
1168
- branding: false,
1169
- height: 500,
1170
- menubar: false,
1171
- plugins: [
1172
- 'advlist',
1173
- 'autolink',
1174
- 'lists',
1175
- 'link',
1176
- 'image',
1177
- 'charmap',
1178
- 'preview',
1179
- 'anchor',
1180
- 'searchreplace',
1181
- 'visualblocks',
1182
- 'code',
1183
- 'fullscreen',
1184
- 'insertdatetime',
1185
- 'media',
1186
- 'table',
1187
- 'code',
1188
- ],
1189
- toolbar:
1190
- 'undo redo | blocks | ' +
1191
- 'bold italic forecolor | alignleft aligncenter ' +
1192
- 'alignright alignjustify | bullist numlist outdent indent | ' +
1193
- 'removeformat | table',
1194
- content_style:
1195
- 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
1196
- }}
1197
- />
1198
- <span
1199
- className={styles.fi__span}
1200
- >
1201
- Description *
1202
- </span>
1203
- </label>
1154
+ 'description'
1155
+ );
1156
+ }}
1157
+ onInit={(evt, editor) =>
1158
+ (editorRef.current = editor)
1159
+ }
1160
+ value={
1161
+ dataField.description || ''
1162
+ }
1163
+ init={{
1164
+ branding: false,
1165
+ height: 500,
1166
+ menubar: false,
1167
+ plugins: [
1168
+ 'advlist',
1169
+ 'autolink',
1170
+ 'lists',
1171
+ 'link',
1172
+ 'image',
1173
+ 'charmap',
1174
+ 'preview',
1175
+ 'anchor',
1176
+ 'searchreplace',
1177
+ 'visualblocks',
1178
+ 'code',
1179
+ 'fullscreen',
1180
+ 'insertdatetime',
1181
+ 'media',
1182
+ 'table',
1183
+ 'code',
1184
+ ],
1185
+ toolbar:
1186
+ 'undo redo | blocks | ' +
1187
+ 'bold italic forecolor | alignleft aligncenter ' +
1188
+ 'alignright alignjustify | bullist numlist outdent indent | ' +
1189
+ 'removeformat | table',
1190
+ content_style:
1191
+ 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
1192
+ }}
1193
+ />
1204
1194
  </div>
1205
1195
  )}
1206
1196
 
@@ -1937,10 +1927,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1937
1927
  </div>
1938
1928
  ) : null}
1939
1929
 
1940
- <div className={styles.gridtxt__header}>
1941
- <span>
1942
- Conditional Field Display Criteria
1943
- </span>
1930
+ <div
1931
+ className={`${styles.formItem} ${styles.fwItem}`}
1932
+ >
1933
+ <div className={styles.gridtxt__header}>
1934
+ <span>
1935
+ Conditional Field Display
1936
+ Criteria
1937
+ </span>
1938
+ </div>
1944
1939
  </div>
1945
1940
 
1946
1941
  <div className={styles.formItem}>
package/src/components/crm/generic/styles/GenericDynamic.module.scss CHANGED
@@ -179,6 +179,7 @@
179
179
  display: grid;
180
180
  grid-template-columns: 1fr 1fr;
181
181
  gap: 1em;
182
+ padding: 0.35rem;
182
183
  }
183
184
  }
184
185
 
package/src/components/crm/generic/styles/GenericFormBuilder.module.scss CHANGED
@@ -299,18 +299,18 @@ input[type='file']:hover {
299
299
 
300
300
  .fi__optionscontainer {
301
301
  display: flex;
302
- flex-wrap: wrap;
303
302
  gap: 10px;
304
303
  margin-top: 8px;
305
304
  }
306
305
 
307
306
  .fi__checkboxcontainer {
308
- display: flex;
307
+ display: grid;
308
+ grid-template-columns: auto 1fr;
309
309
  align-items: center;
310
310
  }
311
311
 
312
312
  .fi__customcheckbox {
313
- margin-right: 5px;
313
+ margin-right: 20px;
314
314
  }
315
315
 
316
316
  .fi__checkboxlabel {
@@ -332,12 +332,12 @@ input[type='file']:hover {
332
332
  input:not(:placeholder-shown) + .fi__span,
333
333
  textarea:not(:placeholder-shown) + .fi__span,
334
334
  select:not(:placeholder-shown) + .fi__span {
335
- transform: translateY(-40%) translateX(10px) scale(0.75);
335
+ transform: translateY(-45%) translateX(10px) scale(0.75);
336
336
  opacity: 1;
337
- padding: 0 4px;
337
+ padding: 0;
338
338
  background: var(--tertiary-color);
339
339
  font-weight: 300;
340
- border-radius: var(--br);
340
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
341
341
  }
342
342
 
343
343
  .prefocus {
@@ -813,6 +813,10 @@ select:not(:placeholder-shown) + .fi__span {
813
813
  border-radius: var(--br);
814
814
  padding: 10px;
815
815
  background: var(--item-color);
816
+
817
+ p {
818
+ font-size: 0.8rem !important;
819
+ }
816
820
  }
817
821
 
818
822
  .crmtitle {
package/src/components/crm/styles/Field.module.scss CHANGED
@@ -57,16 +57,35 @@
57
57
  transform-origin: top left;
58
58
  cursor: text;
59
59
  padding: 0 1rem;
60
+
61
+ ::before {
62
+ content: '';
63
+ display: block;
64
+ height: 0;
65
+ width: 0;
66
+ margin-top: calc((1 - 1.25) * 0.5em);
67
+ }
60
68
  }
61
69
 
62
70
  .fi__div {
63
- transition: all 200ms;
64
- opacity: 0.8;
65
- left: 0;
66
- padding: 19px 13px;
67
- border-radius: var(--radius);
68
- border: 1px solid rgba(var(--paragraph-rgb), 0.15);
69
- box-shadow: none;
71
+ display: block;
72
+ width: 100%;
73
+ padding: 0.85rem;
74
+ font-size: 0.85rem;
75
+ background: white;
76
+ border-radius: var(--br);
77
+ // border: 1px solid rgba(var(--paragraph-rgb), 0.15);
78
+ color: var(--paragraph-color);
79
+ box-sizing: border-box;
80
+ transition: box-shadow 0.15s linear, border 0.15s linear;
81
+
82
+ :hover {
83
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
84
+ }
85
+
86
+ :focus-within {
87
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
88
+ }
70
89
  }
71
90
 
72
91
  .fi__toggle {
@@ -82,47 +101,32 @@
82
101
  font-size: 0.95em;
83
102
  top: -5px;
84
103
  }
85
- }
86
104
 
87
- .fwItem,
88
- .fwBuilderItem {
89
- grid-column: 1 / -1;
90
- width: 100%;
91
- }
92
-
93
- .fi__span::before {
94
- content: '';
95
- display: block;
96
- height: 0;
97
- width: 0;
98
- margin-top: calc((1 - 1.25) * 0.5em);
99
- }
100
-
101
- .fi__toggletxt {
102
- position: relative;
103
- left: 5px;
104
- font-size: 0.95em;
105
- top: -5px;
106
- }
105
+ .fi__optionscontainer {
106
+ display: flex;
107
+ flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
108
+ gap: 10px; // Adds space between checkboxes
109
+ margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
110
+ }
107
111
 
108
- .fi__optionscontainer {
109
- display: flex;
110
- flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
111
- gap: 10px; // Adds space between checkboxes
112
- margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
113
- }
112
+ .fi__checkboxcontainer {
113
+ display: flex;
114
+ align-items: center;
115
+ }
114
116
 
115
- .fi__checkboxcontainer {
116
- display: flex;
117
- align-items: center;
118
- }
117
+ .fi__customcheckbox {
118
+ margin-right: 5px; // Space between checkbox and its label
119
+ }
119
120
 
120
- .fi__customcheckbox {
121
- margin-right: 5px; // Space between checkbox and its label
121
+ .fi__checkboxlabel {
122
+ user-select: none; // Improves UX by preventing text selection
123
+ }
122
124
  }
123
125
 
124
- .fi__checkboxlabel {
125
- user-select: none; // Improves UX by preventing text selection
126
+ .fwItem,
127
+ .fwBuilderItem {
128
+ grid-column: 1 / -1;
129
+ width: 100%;
126
130
  }
127
131
 
128
132
  input:not(:placeholder-shown) + .fi__span,
@@ -148,6 +152,10 @@ select:not(:placeholder-shown) + .fi__span {
148
152
  color: rgba(var(--paragraph-rgb), 0.65) !important;
149
153
  }
150
154
 
155
+ .qtrItem {
156
+ flex-basis: 25%;
157
+ }
158
+
151
159
  .fwItem {
152
160
  flex-basis: 100%;
153
161
  }
@@ -394,3 +402,18 @@ input[type='file']:hover {
394
402
  max-width: 15px;
395
403
  margin-right: 5px;
396
404
  }
405
+
406
+ .formbreak {
407
+ display: block;
408
+ width: 100%;
409
+ padding: 1em;
410
+ background: rgba(var(--primary-rgb), 0.95);
411
+ border-radius: 3px;
412
+ box-sizing: border-box;
413
+ border: 2px solid rgba(var(--primary-rgb), 1.1);
414
+
415
+ span {
416
+ font-size: 0.95em;
417
+ color: var(--secondary-color);
418
+ }
419
+ }