ice-blockchain · ice-atlas · May 16, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import React from 'react';
+import Svg, {Path, SvgProps} from 'react-native-svg';
+import {rem} from 'rn-units';
+
+export const AdminIcon = ({color = COLORS.white, ...props}: SvgProps) => (
+  <Svg
+    width={rem(24)}
+    height={rem(24)}
+    viewBox={'0 0 24 24'}
+    fill={'none'}
+    {...props}>
+    <Path
+      fill={color}
+      d={
+        'm13.868 20.575.303.686-.303-.686Zm-3.736 0 .303-.686-.303.686ZM15.32 3.9l-.245.708.245-.708Zm-6.13-.177-.247-.708.246.708Zm5.62 0 .246-.708-.245.708Zm-6.13.177.246.708-.246-.708Zm10.57 6.674V11.992h1.5V10.575h-1.5Zm0 1.417c0 4.617-3.406 6.889-5.685 7.897l.606 1.372c2.45-1.084 6.579-3.737 6.579-9.269h-1.5Zm-8.815 7.897c-2.279-1.008-5.685-3.28-5.685-7.897h-1.5c0 5.532 4.13 8.185 6.579 9.268l.606-1.371ZM4.75 11.992V10.575h-1.5V11.992h1.5ZM8.926 4.61l.509-.176-.492-1.417-.509.176.492 1.417Zm5.64-.176.508.176.492-1.417-.51-.176-.49 1.417Zm-1.001 15.456c-.332.146-.516.226-.72.279-.193.05-.432.082-.845.082v1.5c.493 0 .867-.039 1.221-.13.344-.09.64-.223.95-.36l-.606-1.371ZM9.829 21.26c.31.137.606.27.95.359.354.091.728.13 1.221.13v-1.5c-.413 0-.652-.032-.845-.082-.204-.053-.388-.133-.72-.28L9.83 21.26ZM20.75 10.575c0-1.43 0-2.533-.043-3.338a8.127 8.127 0 0 0-.112-1.053c-.054-.284-.141-.587-.314-.837l-1.233.854c-.005-.007.033.05.074.263.038.2.067.476.087.853.04.755.041 1.81.041 3.258h1.5Zm-5.675-5.966c1.345.467 2.323.806 3.008 1.088.342.14.587.257.757.357.18.106.216.159.208.147l1.233-.854c-.176-.254-.433-.44-.681-.586a7.637 7.637 0 0 0-.946-.451c-.735-.303-1.761-.658-3.088-1.118l-.492 1.417Zm-5.64-.176c1.44-.5 2-.683 2.565-.683v-1.5c-.877 0-1.711.3-3.057.766l.492 1.417Zm5.621-1.417c-1.345-.467-2.18-.766-3.056-.766v1.5c.566 0 1.124.183 2.565.683l.492-1.417ZM4.75 10.575c0-1.448 0-2.503.04-3.258.021-.377.05-.653.088-.853.04-.212.08-.27.074-.263l-1.233-.854c-.173.25-.26.553-.314.837-.057.296-.09.65-.112 1.053-.043.805-.043 1.908-.043 3.338h1.5Zm3.684-7.383c-1.327.46-2.353.815-3.088 1.118-.368.151-.687.299-.946.451-.248.146-.505.332-.68.586l1.232.854c-.008.012.028-.041.208-.147.17-.1.415-.216.757-.357.685-.282 1.663-.621 3.009-1.088l-.492-1.417ZM13.028 9.3A1.04 1.04 0 0 1 12 10.35v1.5c1.405 0 2.528-1.15 2.528-2.55h-1.5ZM12 10.35a1.04 1.04 0 0 1-1.028-1.05h-1.5c0 1.4 1.123 2.55 2.528 2.55v-1.5ZM10.972 9.3c0-.589.47-1.05 1.028-1.05v-1.5c-1.405 0-2.528 1.15-2.528 2.55h1.5ZM12 8.25a1.04 1.04 0 0 1 1.028 1.05h1.5c0-1.4-1.123-2.55-2.528-2.55v1.5Zm2.806 6.45c0 .55-.04.595-.138.668-.094.069-.303.172-.747.253-.438.08-1.055.129-1.921.129v1.5c.912 0 1.628-.051 2.19-.154.556-.1 1.014-.261 1.365-.518.79-.58.75-1.435.75-1.878h-1.5ZM12 15.75c-.866 0-1.483-.05-1.921-.13-.444-.08-.653-.183-.747-.252-.099-.073-.138-.117-.138-.668h-1.5c0 .443-.038 1.299.752 1.878.35.257.808.417 1.364.518.562.103 1.278.154 2.19.154v-1.5ZM9.194 14.7c0-.065.07-.32.63-.604.519-.262 1.287-.446 2.176-.446v-1.5c-1.074 0-2.084.219-2.853.608-.726.368-1.453 1.013-1.453 1.942h1.5ZM12 13.65c.89 0 1.657.184 2.175.446.56.284.63.54.63.604h1.5c0-.93-.726-1.574-1.452-1.942-.769-.39-1.779-.608-2.853-.608v1.5Z'
+      }
+    />
+  </Svg>
+);
@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import React from 'react';
+import Svg, {Path, SvgProps} from 'react-native-svg';
+import {rem} from 'rn-units';
+
+export const SpeakerphoneIcon = ({
+  color = COLORS.white,
+  ...props
+}: SvgProps) => (
+  <Svg
+    width={rem(24)}
+    height={rem(24)}
+    viewBox={'0 0 24 24'}
+    fill="none"
+    {...props}>
+    <Path
+      stroke={color}
+      strokeLinecap={'round'}
+      strokeLinejoin={'round'}
+      strokeWidth={1.5}
+      d={
+        'M11 5.882V19.24a1.76 1.76 0 0 1-3.417.592l-2.147-6.15m0 0A3.999 3.999 0 0 1 7 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.066-3-9.168-3H7c-.537 0-1.069-.108-1.564-.318ZM18 13a3 3 0 0 0 0-6'
+      }
+    />
+  </Svg>
+);
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: ice License 1.0
 
-import {useEffect} from 'react';
+import {useCallback, useEffect} from 'react';
+import {LayoutChangeEvent} from 'react-native';
 import {
   interpolate,
   useAnimatedStyle,
@@ -11,6 +12,32 @@ import {
 export const useLabelAnimation = (isFocused: boolean, text?: string) => {
   const focusAnimation = useSharedValue(text ? 1 : 0);
 
+  const bodyHeight = useSharedValue(0);
+
+  const labelHeight = useSharedValue(0);
+
+  const onLayoutBody = useCallback(
+    ({
+      nativeEvent: {
+        layout: {height},
+      },
+    }: LayoutChangeEvent) => {
+      bodyHeight.value = height;
+    },
+    [bodyHeight],
+  );
+
+  const onLayoutLabel = useCallback(
+    ({
+      nativeEvent: {
+        layout: {height},
+      },
+    }: LayoutChangeEvent) => {
+      labelHeight.value = height;
+    },
+    [labelHeight],
+  );
+
   useEffect(() => {
     focusAnimation.value = withTiming(isFocused || text ? 1 : 0);
   }, [focusAnimation, isFocused, text]);
@@ -19,10 +46,18 @@ export const useLabelAnimation = (isFocused: boolean, text?: string) => {
     fontSize: interpolate(focusAnimation.value, [0, 1], [16, 12]),
     transform: [
       {
-        translateY: interpolate(focusAnimation.value, [0, 1], [0, -14]),
+        translateY: interpolate(
+          focusAnimation.value,
+          [0, 1],
+          [(bodyHeight.value - labelHeight.value) / 2, -6],
+        ),
       },
     ],
   }));
 
-  return {animatedStyle};
+  return {
+    animatedStyle,
+    onLayoutBody,
+    onLayoutLabel,
+  };
 };